ES10：了解字符串替换方法中的特殊字符-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，字符串操作是非常常见的。在 JavaScript 的字符串操作方法中，字符串替换是十分常见的一种操作。ES10 中新增了一些字符串替换方法，并且支持了一些特殊字符的替换，本文将详细讲解这些方法和特殊字符的用法。

替换方法

在 ES10 中新增的字符串替换方法有三个，分别为 replaceAll、matchAll 和 trimStart/trimEnd。

replaceAll

replaceAll 方法用于将字符串中的所有匹配项替换为指定字符串。它的用法和 replace 方法一样，但它会替换所有匹配项，而不仅仅是第一个。replaceAll 方法的语法如下：

str.replaceAll(regexp|substr, newSubStr|function)

其中，regexp|substr 表示要被替换的字符串或正则表达式；newSubStr|function 表示用来替换的新字符串或生成新字符串的函数。如果是函数的话，参数列表包括匹配到的字符串、匹配的子串和匹配的位置。示例如下：

// www.javascriptcn.com code example
const str = 'abcabcabc';
const newStr = str.replaceAll('b', '-');
console.log(newStr); // 'a-c-a-c-a-c'

const newStr2 = str.replaceAll(/b/g, '-');
console.log(newStr2); // 'a-c-a-c-a-c'

const newStr3 = str.replaceAll(/b/g, (match, p1, p2) => {
  console.log(match, p1, p2);
  return '-';
});
// 'a-c-a-c-a-c'
// 'b' 1 1
// 'b' 4 4
// 'b' 7 7
console.log(newStr3);

replaceAll 方法有一个很方便的特性，就是它可以接收一个字符串作为正则表达式的输入，也就是说可以直接使用字符串变量来表示正则表达式。这在实际开发中非常实用，因为这样可以方便地在代码中传递和修改正则表达式。注意，如果字符串中包含特殊字符，需要使用转义字符 \ 进行转义。

const key = 'java\\Script';
const str = 'JavaScript is a script language';
console.log(str.replaceAll(key, 'TypeScript'));
// 'TypeScript is a script language'

matchAll

matchAll 方法用于在字符串中查找所有匹配的子串，并返回一个 Iterator 对象，可以通过遍历该对象来逐个访问每个子串及其相关信息。该方法的语法如下：

str.matchAll(regexp)

其中，regexp 表示要匹配的正则表达式。matchAll 方法返回一个 Iterator 对象，可以使用 next 方法遍历并访问每个子串及其相关信息。示例如下：

// www.javascriptcn.com code example
const str = 'aaabbbccc';
const iterator = str.matchAll(/a|b/g);
for (const match of iterator) {
  console.log(match[0], match.index);
}
// 'a' 0
// 'a' 1
// 'b' 3
// 'b' 4
// 'c' 6
// 'c' 7

在遍历 Iterator 对象时，每次返回的是一个 MatchArray 对象，其中包含了该子串的一些相关信息，包括匹配到的字符串、匹配到的子串、匹配的位置等。

trimStart/trimEnd

trimStart 和 trimEnd 方法用于去除字符串的开头和结尾的空白字符。它们分别对应于原有的 trimLeft 和 trimRight 方法，原有的方法仍然存在，但已经被标记为过时（deprecated）。

const str = '   abc   ';
console.log(str.trimStart()); // 'abc   '
console.log(str.trimEnd()); // '   abc'

特殊字符

在字符串替换中，ES10 中新增的两个特殊字符分别为 $< 和 $&。

$<

$< 表示引用正则表达式中的分组，语法如下：

const str = 'hello world';
const newStr = str.replace(/(?<word>\w+)\s(?<char>\w+)/, '$<char> $<word>');
console.log(newStr); // 'world hello'

在上面的例子中，(?<word>\w+) 和 (?<char>\w+) 分别表示两个匹配分组，$<char> 和 $<word> 分别表示两个引用分组。使用 $<groupname> 格式来引用命名分组，在字符串替换中非常方便。

$&

$& 表示引用整个匹配文本，语法如下：

const str = 'hello world';
const newStr = str.replace(/world/, '$& is beautiful');
console.log(newStr); // 'hello world is beautiful'

在上面的例子中，$& 引用了匹配到的 world 字符串，然后将其替换成 world is beautiful。

深度和学习以及指导意义

字符串操作是前端开发中非常常见的一种操作，掌握字符串操作方法以及特殊字符的用法可以大幅提高开发效率。ES10 中新增的字符串替换方法和特殊字符可以帮助我们更方便地进行字符串操作，提高代码的可读性和可维护性。

掌握 ES10 中新增的字符串替换方法和特殊字符用法可以让我们在开发中更快、更高效地实现字符串替换操作。同时，熟练掌握字符串操作方法可以提高代码的可维护性和可读性，使代码更易于理解和修改。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7adf7a941bf7134dc2486

ES10：了解字符串替换方法中的特殊字符