JS字符串的常用方法

戴点张鱼丸
180 阅读7分钟

1. JS字符串的常用方法

1.1 操作方法

我们可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变。

1.1.1 增

常用的有 + 或者 ${} 进行字符串拼接，另外，还可通过concat将一个或多个字符串拼接成一个新字符串

如下面代码所示：

let stringValue = "hello "; 
let result = stringValue.concat("world"); 
console.log(result); // 结果："hello world" 
console.log(stringValue); // 结果："hello"

1.1.2 删、截取

这里的删，并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作。

常见的有：

  • slice()
  • substr()
  • substring()

这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。 代码如下所示：

let stringValue = "hello world"; 
console.log(stringValue.slice(3)); // "lo world" 
console.log(stringValue.substring(3)); // "lo world" 
console.log(stringValue.substr(3)); // "lo world" 
console.log(stringValue.slice(3, 7)); // "lo w" 
console.log(stringValue.substring(3,7)); // "lo w" 
console.log(stringValue.substr(3, 7)); // "lo worl"

1.1.3 改

这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作。

常见的有：

  • trim()、trimLeft()、trimRight()
  • repeat()
  • padStart()、padEnd()
  • toLowerCase()、 toUpperCase()

1) trim()、trimLeft()、trimRight() 去空格

删除前、后或前后所有空格符，再返回新的字符串。注意：trim() 方法不适用于 null, undefined, Number 类型。

let stringValue = " hello world "; 
let trimmedStringValue = stringValue.trim(); 
console.log(stringValue); // " hello world " 
console.log(trimmedStringValue); // "hello world"
null.trim() // Uncaught TypeError: Cannot read properties of null 
undefined.trim() // TypeError: Cannot read properties of undefined 
100.trim() // Uncaught SyntaxError

2）repeat() 复制

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果。

let stringValue = "na "; 
let copyResult = stringValue.repeat(2) // na na

3） padStart()、padEnd() 填充字符串

复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件。

let stringValue = "foo"; 
console.log(stringValue.padStart(6)); // " foo" 
console.log(stringValue.padStart(9, ".")); // "......foo"
console.log(stringValue.padEnd(9, ".")); // "foo......"

4）toLowerCase()、 toUpperCase() 大小写转化

let stringValue = "heLLo World"; 
console.log(stringValue.toUpperCase()); // "HELLO WORLD" 
console.log(stringValue.toLowerCase()); // "hello world"

1.1.4 查

除了通过索引的方式获取字符串的值，还可通过以下方法获得字符串的值：

  • chatAt()
  • indexOf()
  • startWith()
  • includes()

1）charAt()和at()

返回给定索引位置的字符，由传给方法的整数参数指定。

let message = "abcde"; 
console.log(message.charAt(2)); // "c" 但是该方法不能识别码点大于0xFFFF的字符，所以es6提出at()来弥补其不足： 
'𠮷'.at(0) // "𠮷"

2）charCodeAt(index) 获取字符串指定位置的Unicode码

"abcd".charCodeAt(0) // 97

3）indexOf()

从字符串开头去搜索传入的字符串，并返回位置（如果没找到，则返回 -1 ）。

let stringValue = "hello world"; 
console.log(stringValue.indexOf("o")); // 4

4）startWith()、includes()

从字符串中搜索传入的字符串，并返回一个表示是否包含的布尔值。

let message = "foobarbaz"; 
console.log(message.startsWith("foo")); // true 
console.log(message.startsWith("bar")); // false 
console.log(message.includes("bar")); // true 
console.log(message.includes("qux")); // false

1.2 转换方法

split 把字符串按照指定的分割符，拆分成数组中的每一项。

let str = "12+23+34"; 
let arr = str.split("+"); // arr的结果为 [12,23,34]，str还是为"12+23+34"

1.3 模板匹配方法

针对正则表达式，字符串设计了以下几个方法：

  • match()
  • search()
  • replace()

1）match()

接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，返回数组。

let text = "cat, bat, sat, fat"; 
let pattern = /.at/; 
let matches = text.match(pattern); 
console.log(matches); // ['cat', index: 0, input: 'cat, bat, sat, fat', groups: undefined]
console.log(matches[0]); // "cat"

2）search()

接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，找到则返回匹配索引，否则返回 -1。

let text = "cat, bat, sat, fat"; 
let pos = text.search(/at/); 
console.log(pos); // 1

3）replace()

接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数）。

let text = "cat, bat, sat, fat"; 
let result = text.replace("at", "ond"); 
console.log(result); // "cond, bat, sat, fat"
// 使用正则进行全局匹配替换 
let result2 = text.replace(/at/g, "ond"); // 'cond, bond, sond, fond'

1.4 JSON.stringify()和JSON.parse()

JSON.stringify(): 将一个对象转换为字符串，但是数字是不会被转换的。

image.png

JSON.parse用于从一个字符串中解析出json对象，如

var str = '{"name": "huangxiaojian", "age": "23"}'; 
JSON.parse(str); // {name: "huangxiaojian", age: "23"} 
var a = { a:1, b:2 }; 
JSON.stringify(a); // "{"a":1,"b":2}"

1.5 字符串的length属性

length表示字符串的长度，注意一个汉字代表一个字符， 一个数字或字母等也代表一个字符，如：

"bmn哈喽".length; // 5

1.6 将布尔、数值等类型的值转为字符串的方法

  1. xxx + "" 直接转为字符串

  2. xxx.toString(); 将xxx转换为字符串

toString(), 不但能转换成字符串，而且还能按制定的进制转换:

Math.random().toString(2);
Math.random().toString();
Math.random().toString(36);
var B=new Date(); 
B.getTime().toString(16); // "15b51d8ef8e" 最大进制为36,可以在2~36间任意指定 
10.toString(36) // 结果为a， 
11.toString(36) // 为b

1.7 数字和字符串之间的转换

1.7.1 数字转为字符串的方法

1） 添加一个空的字符串

var n = 100;  
var n_as_string = n + ""; 

2） 使用String()函数让数字更加显式地转换为字符串

const string_value = String(number);  
String(null) // null 
String(undefined) // undefined

注意： 如果不知道所转换的值是不是null或者undefined，则使用String()。

3） 使用toString()方法

const num = 18;
num.toString(); // '18'

注意： toString()不可以转换null或者undefined

Number对象的toString()方法有一个可选的参数，该参数用来指定转换的基数。如果不指定这个参数，转换会以10为基数进行。然而，也可以按照其他的基数（2到36之间的数）来转换数字。 

var n = 17;  
binary_string = n.toString(2); // Evaluates to "10001"  
octal_string = "0" + n.toString(8); // Evaluates to "021"  
hex_string = "0x" + n.toString(16); // Evaluates to "0x11"  

// 注意： 2.toString() // 报语法错误 但是，写成下面这三种就可以正常解析了： 
2..toString(); // 第二个点号可以正常解析 
2 .toString(); // 注意点号前面的空格 
(2).toString(); // 2先被计算

4） toFixed()方法把一个数字转换为字符串，并且显示小数点后的指定的位数，它不使用指数表示法

var n = 123456.789;  
n.toFixed(0); // "123457"  
n.toFixed(1); // "123456.8" 

5）toExponential()使用指数表示法把一个数字转换为字符串，小数点前面有1位数，而小数点后面有特定的位数

var n = 123456.789;  
n.toExponential(1); // "1.2e+5"  
n.toExponential(3); // "1.235e+5" 

6） toPrecision()使用指定的有意义的位数来显示一个数字，如果有意义的位数还不够显示数字的整个整数部分，它就使用指数表示法

var n = 123456.789;  
n.toPrecision(4); // "1.235e+5"  
n.toPrecision(7); // "123456.8" 

1.7.2 字符串转换为数字的方法

方法主要有：转换函数、强制类型转换。

1） 转换函数parseInt()和parseFloat()

parseInt()： 把值转换成整数

parseFloat()，把值转换成浮点数。

注意： 只有对Number类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)

parseInt("1234blue"); // 1234 
parseInt("0xA"); // 10 
parseInt("22.5"); // 22 
parseInt("blue"); // NaN

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：

parseInt("AF", 16); // 175 
parseInt("10", 2); // 2

如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：

parseInt("010"); // 8 
parseInt("010", 8); // 8 
parseInt("010", 10); // 10

parseFloat()方法与parseInt()方法的处理方式相似，其不同之处是字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。

parseFloat("1234blue"); // 1234.0 
parseFloat("0xA"); // NaN 
parseFloat("22.5"); // 22.5 
parseFloat("22.34.5"); // 22.34 
parseFloat("0908"); // 908 
parseFloat("blue"); // NaN

2） 强制类型转换

  • Boolean(value)——把给定的值转换成Boolean型；

  • Number(value)——把给定的值转换成数字（可以是整数或浮点数）；

  • String(value)——把给定的值转换成字符串，返回一个新值。

注意： Boolean(value)： 如果value是空字符串、数字0、undefined或null，结果为false。

Boolean(new Object()); // true

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。示例如下：

Number(value)：

当value为false、null时，结果为 0；

当value为true时， 结果为 1；

如果value为数值，则结果为该数值本身。

String()的用法请见上一小节。

关于字符串的一些总结，就先讲到这里了，有什么补充的后续再更新哦。

avatar
文章
阅读
粉丝