【JavaScript】常用的字符串方法汇总（含ES6字符串方法）

常用的数组方法汇总（含ES6数组方法）

• ​​一、 ES5 字符串方法​​

• ​​1. length​​
• ​​2. charAt()​​
• ​​3. charCodeAt()、fromCharCode()​​
• ​​4. indexOf()、lastIndexOf()​​
• ​​5. concat()​​
• ​​6. split()​​
• ​​7. substr()、substring()、slice()​​
• ​​8. toLowerCase()、 toUpperCase()​​
• ​​9. replace()、match()、search()​​
• ​​10. trim()​​
• ​​11. valueOf()、toString()​​

• ​​二、ES6 字符串方法​​

• ​​1. includes()、startsWith()、 endsWith()​​
• ​​2. repeat()​​
• ​​3. padStart()、padEnd()​​
• ​​4. trimStart()、trimEnd()​​

一、 ES5 字符串方法

先看一下ES5中常见的字符串方法：

1. length

获取字符串长度： ​​str.length​​

let str = "abcdefg";
console.log(str.length);  //7
console.log(str[str.length-1]);  //"g"

2. charAt()

获取字符串某位字符：​​str.charAt()​​

let str = "abcdefg";
console.log(str[0]); //"a"
console.log(str.charAt(1)); //"b"

3. charCodeAt()、fromCharCode()

（1）​​charCodeAt()​​：返回指定索引位置字符的 Unicode 值

let str = "abcdefg";
console.log(str.charCodeAt(1)); //"b" --> 98

（2） ​​fromCharCode()​​：将 Unicode 转换为字符串

console.log(String.fromCharCode(98)); //98 --> "b"

4. indexOf()、lastIndexOf()

（1）​​indexOf()​​：查找某个字符，有则返回第一次匹配到的位置，否则返回-1

let str = "abcdefg";
console.log(str.indexOf("a"));  // 0
console.log(str.indexOf("z"));  // -1

（2）​​lastIndexOf()​​：查找某个字符，有则返回最后一次匹配到的位置，否则返回-1

let str = "abcabc";
console.log(str.lastIndexOf("a"));  // 3
console.log(str.lastIndexOf("z"));  // -1

5. concat()

将指定的字符串参数连接到字符串上

let str = "abc";
console.log(str.concat("efg")); //"abcefg"
console.log(str.concat("efg","hijk")); //"abcefghijk"

6. split()

把一个字符串分割成字符串数组。

语法： ​​str.split(separator,howmany)​​

参数：

• separator： 必需。字符串或正则表达式，从该参数指定的地方分割 str。
• howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

let str = "abcdef";
console.log(str.split("c")); // ["ab", "def"]
console.log(str.split(""));  // ["a", "b", "c", "d", "e", "f"]

注意：如果把空字符串 ("") 用作 separator，那么 str中的每个字符之间都会被分割。

7. substr()、substring()、slice()

这三个方法都是用来截取字符串：

（1） ​​slice()​​ ：提取字符串的片断，并在新的字符串中返回被提取的部分

语法： slice(start, end)

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

注意： 如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。

let str = "abcdef";
console.log(str.slice(1,6)); //"bcdef" [1,6)
console.log(str.slice(1));   //"bcdefg" 
console.log(str.slice());    //"abcdefg" 
console.log(str.slice(-2));  //"fg"
console.log(str.slice(6, 1));  //""

（2） ​​substr()​​​ : 从起始索引号提取字符串中指定数目的字符
语法： ​​stri.substr(start, length)​​

参数：

• start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
• length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

let str = "abcdef";
console.log(str.substr(1,6));  //"bcdefg" 6代表切割的length
console.log(str.substr(1));   //"bcdefg" [1,str.length-1]
console.log(str.substr());  //"abcdefg" [0,str.length-1]
console.log(str.substr(-1));  //"g"

（3） ​​substring()​​ ：提取字符串中两个指定的索引号之间的字符

语法： ​​str.substring(start,stop)​​

参数：

• start ：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
• stop ：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

注意： 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。并且该方法不接受负的参数，如果参数是个负数，就会返回这个字符串。

let str = "abcdef";
console.log(str.substring(1,6)); //"bcdef" [1,6)
console.log(str.substring(1));  //"bcdefg" [1,str.length-1]
console.log(str.substring()); //"abcdefg" [0,str.length-1]
console.log(str.substring(6,1)); //"bcdef" [1,6)
console.log(str.substring(-1)); //"abcdefg"

8. toLowerCase()、 toUpperCase()

（1）​​toLowerCase()​​：把字符串转换为小写

（2）​​toUpperCase()​​：把字符串转换为大写

let str = "adABDndj";
console.log(str.toUpperCase()); //"ADABDNDJ"
console.log(str.toLowerCase()); //"adabdndj"

9. replace()、match()、search()

这三个方法都是用来匹配或者替换字符

（1）​​replace()​​ ：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法： ​​str.replace(regexp/substr,replacement)​​

参数：

• regexp/substr：必需。规定子字符串或要替换的模式的 RegExp 对象。如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
• replacement：必需。一个字符串值。规定了替换文本或生成替换文本的函数。

let str = "abcdef";
console.log(str.replace("c", "z")) // abzdef

注意： 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

（2）​​match()​​ ：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

语法： ​​str.match(searchvalue/regexp)​​

参数:

• searchvalue： 必需。规定要检索的字符串值。
• regexp： 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

注意： 该方法返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

（3）​​search()​​ ：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

语法： ​​str.search(regexp)​​

参数：

• regexp ：该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。

注意： 要执行忽略大小写的检索，请追加标志 i。该方法不执行全局匹配，它将忽略标志 g，也就是只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串，则返回 -1。

返回值： 返回 str 中第一个与 regexp 相匹配的子串的起始位置。

let str = "abcdef";
console.log(str.search(/bcd/)) // 1

10. trim()

该方法用于移除字符串首尾空白

let str = "  abcdef  "
console.log(str.trim()) // "abcdef"

11. valueOf()、toString()

这两个方法都是返回字符串本身的值

（1）​​valueOf()​​：返回某个字符串对象的原始值

该方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。

let str = "abcdef"
console.log(str.valueOf()) // "abcdef"

（2）​​toString()​​：返回字符串对象本身

let str = "abcdef"
console.log(str.toString()) // "abcdef"

二、ES6 字符串方法

再看一下ES6中常见的字符串方法：

1. includes()、startsWith()、 endsWith()

在ES6之前，只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

• ​​includes()​​：返回布尔值，表示是否找到了参数字符串。
• ​​startsWith()​​：返回布尔值，表示参数字符串是否在原字符串的头部。
• ​​endsWith()​​：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = 'Hello world!';

str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，​​endsWith​​的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

2. repeat()

该方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数，会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)   // RangeError
'na'.repeat(-1)         // RangeError

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

3. padStart()、padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。​​padStart()​​​用于头部补全，​​padEnd()​​用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，​​padStart()​​​和​​padEnd()​​一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

4. trimStart()、trimEnd()

ES2019 对字符串实例新增了​​trimStart()​​​和​​trimEnd()​​​这两个方法。它们的行为与​​trim()​​​一致，​​trimStart()​​​消除字符串头部的空格，​​trimEnd()​​消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim()   // "abc"
s.trimStart()   // "abc  "
s.trimEnd()   // "  abc"

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法，​​trimLeft()​​​是​​trimStart()​​​的别名，​​trimRight()​​​是​​trimEnd()​​的别名。