ES6 - 字符串新增的一些常用方法

0，新增的一些方法

介绍一些ES6字符串对象新增的一些常用方法。

方法名	描述
includes()	返回布尔值，表示是否找到了参数字符串
startsWith()	返回布尔值，表示参数字符串是否在原字符串的头部
endsWith()	返回布尔值，表示参数字符串是否在原字符串的尾部
repeat()	repeat方法返回一个新字符串，表示将原字符串重复n次。
padStart()	用于头部补全，第一个参数是补全生效的最大长度，第二个参数是用来补全的字符串
padEnd()	用于尾部补全，第一个参数是补全生效的最大长度，第二个参数是用来补全的字符串
trimStart()	消除字符串头部的空格
trimEnd()	消除尾部的空格
replace()	只能替换第一个匹配到的字符
replaceAll()	可以一次性替换所有匹配到的字符
at()	返回参数指定索引位置的字符，支持负索引（即倒数的位置）

1，includes()、startsWith()、endsWith()

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

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

      let like = "Eula - Amber";
      console.log( like.startsWith("Eula"));// true
      console.log( like.endsWith("Amber")); // true
      console.log(like.includes("-"));      // true

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

      let like2 = "Kaya"
      console.log(like2.startsWith("K",0)); // true
      console.log(like2.endsWith("a",2)); // true 针对前n个字符中查找
      console.log(like2.endsWith("a",4)); // true 针对前n个字符中查找
      console.log(like2.includes("y",2)); // true 

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

2，repeat()

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

      console.log("*".repeat(50));
      console.log("|==".repeat(18)); 
      console.log("Eula-".repeat(10)); 
      console.log("*".repeat(50));

打印如下：

**************************************************
|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==
Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-
**************************************************

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

 console.log('xiao'.repeat(2.1));//xiaoxiao
 console.log('xiao'.repeat(2.9));//xiaoxiao

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

 console.log('xiao'.repeat(Infinity));//Invalid count value: Infinity
 console.log('xiao'.repeat(-1));//  Invalid count value: -1

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

 console.log('xiao'.repeat(-0.9) ); // ""  空串

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

 console.log('xiao'.repeat('aa')); // ""  空串
 console.log('xiao'.repeat('3') );// xiaoxiaoxiao

3，padStart()、padEnd()

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

基本用法：

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

   console.log("x".padStart(2,0));// 0x
   console.log("x".padStart(5,0));// 0000x
   console.log("x".padEnd(2,'0'));// x0
   console.log("x".padEnd(5,'0'));// x0000

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

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

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

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

padStart()的常见用途是日期月份前面补0 ；如下案例：

  let str = new Date();
  console.log(new Date().toLocaleDateString()); // 2023/8/2
  let month = (str.getMonth() + 1).toString();
  console.log(month.padStart(2, "0")); // 08

4，trimStart()、trimEnd()

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

      const lik3 = "  Eula  ";
      console.log( lik3.trim());      // 'Eula'
      console.log( lik3.trimStart()); // 'Eula  '
      console.log( lik3.trimEnd());   // '   Eula'

上面代码中，trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。

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

5，replaceAll()

之前，字符串的实例方法replace()只能替换第一个匹配。

'aabbcc'.replace('b', '_')
// 'aa_bcc'

上面例子中，replace()只将第一个b替换成了下划线。

如果要替换所有的匹配，不得不使用正则表达式的g修饰符。

'aabbcc'.replace(/b/g, '_')
// 'aa__cc'

正则表达式毕竟不是那么方便和直观，ES6 引入了replaceAll()方法，可以一次性替换所有匹配。

'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

它的用法与replace()相同，返回一个新字符串，不会改变原字符串。

String.prototype.replaceAll(searchValue, replacement)

如果searchValue是一个不带有g修饰符的正则表达式，replaceAll()会报错。这一点跟replace()不同。

// 不报错
'aabbcc'.replace(/b/, '_')

// 报错
'aabbcc'.replaceAll(/b/, '_')

上面例子中，/b/不带有g修饰符，会导致replaceAll()报错。

replaceAll()的第二个参数replacement是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。

• $&：匹配的字符串。
• $ `：匹配结果前面的文本。
• $'：匹配结果后面的文本。
• $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
• $$：指代美元符号$。

下面是一些例子。

// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

replaceAll()的第二个参数replacement除了为字符串，也可以是一个函数，该函数的返回值将替换掉第一个参数searchValue匹配的文本。

'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'

上面例子中，replaceAll()的第二个参数是一个函数，该函数的返回值会替换掉所有b的匹配。

6，at()

at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

  const str = "Eula";
  console.log( str.at(1)); // E
  console.log( str.at(1)); // u
  console.log( str.at(-1));// a

如果参数位置超出了字符串范围，at()返回undefined

  console.log( str.at(10)); // undefined