ES12：更好的 String Matching 函数

随着前端网站的日益复杂和需求的不断增加，字符串操作也变得越来越重要。在 JavaScript 中，字符串匹配是很常见的一种操作，而在 ES12 中，新增了一些更好的 String Matching 函数，这些函数不仅更强大，而且更加易用。本文将介绍 ES12 中的几个重要的字符串匹配函数。

str.matchAll()

在 ES12 中，新增了一个 str.matchAll() 函数，用于查找所有的字符串匹配项，并返回一个迭代器。相较于 str.match()，str.matchAll() 不会停止在第一个匹配项，而是会一直查找到字符串末尾，返回的迭代器中包含了所有的匹配项。

这个函数的参数与 str.match() 相同，可以传入一个 RegExp 对象或一个字符串。示例如下：

const str = "Hello JavaScript World!";
const re = /Java(\w+)/g;

const matches = str.matchAll(re);
for (const match of matches) {
  console.log(match[1]);
}

输出结果：

Script

str.replaceAll()

str.replaceAll() 与 str.replace() 类似，都是用来替换字符串中的匹配项。不同之处在于，str.replaceAll() 会替换所有匹配项，而 str.replace() 只替换第一个匹配项。

此外，str.replaceAll() 和 str.replace() 的参数都可以是一个字符串或一个函数。如果是一个函数，该函数将被用于处理匹配项，并返回替换后的字符串。

同样以示例代码来说明：

const str = "Hello Javascript World!";
const re = /Java(\w+)/g;

const replaced = str.replaceAll(re, "Type$1");
console.log(replaced); // "Hello TypeScript World!"

const replaced2 = str.replaceAll(/\w+/, (match) => match.toUpperCase());
console.log(replaced2); // "HELLO JAVASCRIPT WORLD!"

str.slice()

str.slice() 用于返回一个新的子字符串，其范围由两个指定的索引决定。这个函数在 ES6 中已经存在，而在 ES12 中，新增了对负数索引的支持。

具体而言，当索引值为负数时，它们表示从字符串结尾开始反向计数。例如，str.slice(-2) 表示返回倒数第二个字符到字符串结尾的子字符串。

下面的示例代码将演示这个功能：

const str = "Hello World!";

const slice1 = str.slice(1, 5);
console.log(slice1); // "ello"

const slice2 = str.slice(-6, -1);
console.log(slice2); // "World"

str.trimStart() 和 str.trimEnd()

str.trimStart() 和 str.trimEnd() 用于删除字符串的开头和结尾的空白符（包括空格、制表符、换行符等）。这两个函数在 ES11 中已经存在，而在 ES12 中，它们的别名 str.trimLeft() 和 str.trimRight() 被废弃了。

下面是一个示例代码：

const str = "   Hello World!    ";

const trimmed = str.trimStart().trimEnd();
console.log(trimmed); // "Hello World!"

总结

ES12 中新增的几个字符串匹配函数使得字符串操作更加便捷和高效。通过 str.matchAll()，我们可以获得所有的匹配项，而 str.replaceAll() 则可以方便地替换全部匹配项。另外，str.slice()、str.trimStart() 和 str.trimEnd() 的负数索引支持也是非常实用的功能。对于需要进行字符串处理的前端开发者来说，学习和使用这些新的字符串匹配函数，可以使得代码更加简洁、高效、易读。

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