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