引言：String类型上提供了很多非常方便的方法，能够帮助我们更加方便的编写代码，让我们一起来学习它们吧！！！

注：本文采取概念加示例的方式介绍字符串上的方法，介绍的顺序与方法的重要性无关

1、valueOf()  方法返回 String对象的原始值

let str = 'Hello world';
console.log(str.valueOf()); // "Hello world"

2、trim()  方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符(空格, 制表符等)以及所有行终止符字符（回车和换行）

• 不会修改原字符串
• 返回值：去掉两端空白的新字符串
• 注：不会去掉字符串内部的空白

3、trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。

• 不会修改原字符串
• 返回值：一个去掉开头(左端)空白的新字符串

4、trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

• 不会修改原字符串
• 返回值：一个去掉末尾(右端)空白的新字符串

// trim()  trimStart()   trimEnd()
let str2 = '    hello world    ';
let result2 = str2.trim();
let result3 = str2.trimStart();
let result4 = str2.trimLeft(); // 会有删除线
let result5 = str2.trimEnd();
let result6 = str2.trimRight(); // 会有删除线
console.log(str2); // '    hello world    ' 不影响原字符串
console.log(result2); // "hello world"  去掉两端
console.log(result3); // "hello world    "  去掉前面
console.log(result4); // "hello world    "
console.log(result5); // "    hello world"  去掉后面
console.log(result6); // "    hello world"

• 为了兼容旧环境，可以在最前面执行下面的代码：

// 当trim()不存在时
if (!String.prototype.trim) {
// 往原型上添加一个名为trim的函数
  String.prototype.trim = function () {
  // 调用字符串的replace方法，用空字符串替换空白
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

5、match(regexp)  方法检索返回一个字符串匹配正则表达式的结果。

• 不会修改原字符串
• 参数：regexp正则表达式，非正则会被隐式的转换为正则
• 返回值：
  • 1.没有参数，得到一个包含空字符串的数组；['']
  • 2.如果使用g匹配模式，则将返回与正则表达式完整匹配的所有结果，但不会返回捕获组。
  • 如果未使用g匹配模式，则仅返回第一个完整匹配及其相关的捕获组（Array），在这种情况下，返回的数组将具有如下所述的其他属性。
    • groups: 一个命名捕获组对象，其键名是捕获组名称，值是对应捕获组，如果未定义命名捕获组，则为 undefined
    • index: 所匹配到的结果的开始位置索引
    • input: 用于匹配的字符串。
• str.match(regexp)和regexp[Symbol.match](str)都是在String.prototype.match()上调用的，所以这两个方法的返回值是一样的

// 未使用 g
let result1 = 'aababccde'.match(/(abc)|(cde)/);
let result2 = /(abc)|(cde)/[Symbol.match]('aababccde');
console.log(result1); // ['abc', 'abc', undefined]; 仅第一个匹配结果和相关捕获组
console.log(result2); // ['abc', 'abc', undefined];
console.log(result2.index); // 3
console.log(result2.input); // aababccde
console.log(result2.groups); // undefined

// 使用 g
let result3 = 'aababccde'.match(/(abc)|(cde)/g);
let result4 = /(abc)|(cde)/g[Symbol.match]('aababccde');
console.log(result3); // [ 'abc', 'cde' ] 所有匹配结果，没有捕获组
console.log(result4); // [ 'abc', 'cde' ]

6、 str.matchAll(regexp) 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

• 不会修改原字符串
• 参数：regexp正则表达式，非正则会被隐式的转换为正则
• 返回值：一个迭代器(可迭代的属性值是数组，第一项为完全匹配的字符，后续项为相关捕获组)，类数组对象迭代器可以转换为数组
• str.matchAll(regexp)``和regexp[Symbol.matchAll](str)都是在String.prototype.matchAll()上调用的，所以这两个方法的返回值是一样的
• ！！！str.matchAll(regexp)中的参数正则必须要使用g匹配模式，不然会报错

let reg = /[0-9]+/g;
let str = '2016-01-02';
let result1 = reg[Symbol.matchAll](str);
let result2 = str.matchAll(reg);// 这里的正则表达式一定要加上全局匹配模式 g ,不然会报错

// 将返回的迭代器中的每一项(也是数组)的第一项(完全匹配的字符)提取出来
console.log(Array.from(result1, (x) => x[0])); // ["2016", "01", "02"]
console.log(Array.from(result2, (x) => x[0])); // ["2016", "01", "02"]

7、replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

• 不会修改原字符串
• 参数：
  • regexp或者一个字符串,用于寻找被替换内容的匹配规则
  • newSubStr,类型是字符串的替换器
  • 或者是function，针对每次匹配结果而生成新的子字符串的回调函数替换器
• 返回值：用替换器替换相应匹配项后的新字符串
• regexp[Symbol.replace](str, newSubStr|function)和str.replace(regexp)都是在String.prototype.replace()上调用的，所以这两个方法的返回值是一样的

let reg = /-/g;
let str = '2016-01-01';
let newstr1 = reg[Symbol.replace](str, '/');
let newstr2 = str.replace(reg, '/');
console.log(newstr1); // 2016/01/01
console.log(newstr2); // 2016/01/01

8、replaceAll()  方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。

• 不会修改原字符串
• 参数：
  • regexp或者一个字符串,用于寻找被替换内容的匹配规则
  • newSubStr,类型是字符串的替换器
  • 或者是function，针对每次匹配结果而生成新的子字符串的回调函数替换器
• 返回值：用替换器替换相应匹配项后的新字符串
• ！！！str.replaceAll(regexp)中的参数正则必须要使用g匹配模式，不然会报错

let reg = /-/g;
let str = '2016-01-01';
let newstr = str.replaceAll(reg, '/');
console.log(newstr); // 2016/01/01

9、search()  方法执行正则表达式和String对象之间的一个搜索匹配。

• 不会修改原字符串
• 参数：regexp正则表达式，非正则会被隐式的转换为正则
• 返回值：返回匹配规则找到的第一个匹配项的开始索引，没找到返回-1
• regexp[Symbol.search](str)和str.search(regexp)都是在String.prototype.search()上调用的，所以这两个方法的返回值是一样的

let reg = /-/g;
let str = '2016-01-01';
let newstr1 = reg[Symbol.search](str);
let newstr2 = str.search(reg);
console.log(newstr1); // 4
console.log(newstr2); // 4

10、split()  方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

• 不会修改原字符串
• 参数：
  • separator指定表示每个拆分应发生的点的字符串。separator 可以是一个字符串或正则表达式。；
  • limit（可选）一个为了限制切割数量的整数
• 返回值：包含子字符串的数组
• regexp[Symbol.split](str[, limit])和str.split(regexp)都是在String.prototype.split()上调用的，所以这两个方法的返回值是一样的

let reg = /-/g;
let str = '2016-01-01';
let newstr1 = reg[Symbol.split](str);
let newstr2 = str.split(reg);
console.log(newstr1); // [ '2016', '01', '01' ]
console.log(newstr2); // [ '2016', '01', '01' ]

11、slice()  方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

• 不会修改原字符串
• 参数：beginIndex开始位置索引（包含），负数就倒数；endIndex结束位置索引（不包含），省略则开始后的所有；负数也是倒数
• 返回值：从原字符串中提取出来的新字符串

let str1 = 'The morning is upon us.'; // str1 的长度 length 是 23。
let str2 = str1.slice(1, 8);
let str3 = str1.slice(4, -2);

console.log(str2); // 'he morn'
console.log(str3); // 'morning is upon u'

12、startsWith()  方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。

• 不会修改原字符串
• 参数：searchStr给定用于要搜索的字符串;position开始搜索的位置，默认值为0
• 返回值：在字符串开头找到为true，反之为false
• ！！！ 区分大小写

13、str.endsWith()  方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。

• 不会修改原字符串
• 参数：searchStr给定用于要搜索的字符串;length作为用于检查的str的长度。默认值为str.length
• 返回值：在字符串开头找到为true，反之为false
• ！！！ 区分大小写

// startsWith()  endsWith()
let str = 'aabbcc';
let result1 = str.startsWith('aa', 0);
let result2 = str.endsWith('cc', 6);
console.log(result1); // true
console.log(result2); // true

14、substring()  方法从字符串中截取一个子字符串

• 不会修改原字符串
• 参数： indexStart(包含)开始截取的位置；indexEnd(不包含)结束截取的位置
• 返回值：截取到的新字符串
• ！！！注意：
  • 1.如果indexEnd等于indexEnd，则返回一个空字符串；
  • 2.如果省略indexEnd，则返回indexEnd到字符串末尾；
  • 3.任意一个小于0或者为NaN，都会被当做0；
  • 4.任意一个参数大于字符串长度都会被当做字符串长度；
  • 5.如果indexEnd小于indexEnd，则将两个参数换一下继续执行

// substring()
let str = 'hello world';
console.log(str.substring(0, 5)); // "hello"
console.log(str.substring(5, 5)); // ""
console.log(str.substring(0)); // "hello world"
console.log(str.substring(-1, 5)); // "hello"
console.log(str.substring(5, 0)); // "hello"
console.log(str.substring(5, NaN)); // "hello"

15、concat()  方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

• 不会修改原字符串
• 需要被合并到目标字符串的其他字符串(非字符串会被转化为字符串)
• 合并完毕后的新的字符串
• 建议使用赋值操作符，字符串的+和+=代替该方法

// concat()
let str = 'aa';
console.log(str.concat('bb', 'cc')); // "aabbcc"
console.log(str + 'bb' + 'cc'); // "aabbcc"

16、includes()  方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

• 参数：searchString用于在目标字符串中搜索的字符串；position开始检索的位置，默认为0
• 返回值：有就返回true，没有false
• ！！！区分大小写

17、indexOf()  方法检索给定字符串第一次出现的索引值

• 参数：
  • searchValue要检索的字符串；
  • position （可选）开始检索的位置，默认为0；大于字符串长度返回-1；小于0则被当做0；
• 返回值：第一次出现的索引值，没有就是-1
  • 使用空字符串的时候，没有第二个参数就返回0；有第二个参数，且小于字符串长度，返回第二个参数一样的值；大于字符串长度就返回字符串长度
• ！！！区分大小写

18、lastIndexOf()  方法返回调用String对象的指定值从后往前找第一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1 。

• 参数：
  • searchValue要检索的字符串；
  • fromIndex （可选）开始检索的位置，默认为正无穷；大于字符串长度返回则检索全部；小于0则被当做0；
• 返回值：从后往前找，第一次出现的索引值，没有就返回-1
• ！！！区分大小写

// includes()   indexOf()  lastIndexOf()
let str = 'abcdabcdabcd';
console.log(str.includes('abcd')); // true
console.log(str.includes('abce')); // false
console.log(str.indexOf('abcd')); // 0
console.log(str.indexOf('abcd', 2)); // 4
console.log(str.lastIndexOf('abcd')); // 8
console.log(str.lastIndexOf('abcd', 5)); // 4 !!!只是开始的位置是第二个参数，后面的内容还是可以被匹配的

19、charAt()  方法从一个字符串中返回指定的字符。

• 参数:索引值，默认值是0，范围0到字符串长度-1
• 返回值：指定索引处的字符，超出范围则为空字符串

20、charCodeAt()  方法返回给定索引处的字符的 UTF-16编码，范围0~65535之间

• 参数:索引值，默认值是0，范围0到字符串长度-1
• 返回值：指定索引出的字符的UTF-16编码，超出范围则为NaN
• 如果索引小于0，等于或等于字符串长度就返回NaN

21、静态 String.fromCharCode()  方法返回由指定的 UTF-16编码创建的字符串。

• 参数：一系列代表UTF-16编码的数字，范围0~65535(0xffff),超过会被截断
• 返回值：由参数对应生成的字符拼接成的字符串

22、String.fromCodePoint() 静态方法返回使用指定的代码点序列创建的字符串。

• 参数：完整的Unicode字符编码（超过0~65535不会被截断）的数字
• 返回值：由参数对应生成的字符拼接成的字符串

// charAt();charCodeAt();String.fromCharCode();String.fromCodePoint()
let str = 'abcdefg';
console.log(str.charAt(6)); // g
console.log(str.charCodeAt(6)); // 103

console.log(String.fromCharCode(103)); // g
console.log(String.fromCharCode(65, 66, 67)); // ABC
console.log(String.fromCodePoint(103)); // g
console.log(String.fromCodePoint(65, 66, 67)); // ABC

23、padStart()  方法用另一个字符串填充当前字符串（如果需要的话，会重复多次），以便产生的字符串达到给定的长度。从当前字符串的开头（左侧）开始填充。

• 参数：
  • targetLength需要填充到的目标长度，数值小于当前字符串长度，就返回原字符串；
  • padString用于填充的字符串，参数默认为" ",如果用于填充的字符串在循环整数次后会使得被填充的字符串超过目标长度，则用于填充的部分字符串自动截断，保留前面的
• 返回值：被填充到目标长度的新字符串

24、padEnd()  方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

• 参数：
  • targetLength需要填充到的目标长度，数值小于当前字符串长度，就返回原字符串；
  • padString用于填充的字符串，参数默认为" ",如果用于填充的字符串在循环整数次后会使得被填充的字符串超过目标长度，则字符串自动截断，保留前面的
• 返回值：被填充到目标长度的新字符串

// padStart()  padEnd()
console.log('abc'.padStart(10));// "       abc"
console.log('abc'.padStart(10, '123'));// "1231231abc"
console.log('abc'.padEnd(10));// "abc       "
console.log('abc'.padEnd(10, '123'));// "abc1231231"

25、String.raw()  可以将一个模板字符串的转化为原始字符串

• 返回值：给定模板字符串的原始字符串
• 常规使用，放到模板字符串的前面，其他都由引擎调用，不需要将它看做一个普通的函数：String.raw一个模板字符串

// String.raw
let a = 'Bob';
console.log(String.raw`Hi\n${a}!`);// Hi\nBob!

26、repeat()  构造一个由字符串循环几次然后组成的一个新的字符串

• 参数：count一个整数，表示要循环重复几次原字符串
• 返回值：由循环并组合到一起的新字符串
• ！！！循环次数不能为负，循环次数要小于无穷，字符串的长度不能大于最大的字符串

// repeat()
let str = 'abc';
console.log(str.repeat(5)); // "abcabcabcabcabc"

27、toLowerCase()  会将调用该方法的字符串值转为小写形式，并返回转成小写的新的字符串，不影响原字符串。

28、toUpperCase()  方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换），不影响原字符串。。

// toLowerCase()  toUpperCase()
let str = 'nkJHbkjhNbH';
console.log(str.toLowerCase()); // "nkjhbkjhnbh"
console.log(str.toUpperCase()); // "NKJHBKJHNBH"

总结：到这里，字符串的方法差不多也介绍完啦，也希望看到这的小伙伴能有所收获，更详细的使用方式和场景可以去查看MDN上的String方法的详细教程