在 ES10 中，JavaScript 引入了新的字符串方法 String.prototype.matchAll()。该方法可以返回一个迭代器，用于迭代一个字符串中所有匹配正则表达式的结果。这个新的方法为前端开发者提供了更加方便的方式来处理字符串。
matchAll 方法的基本用法
String.prototype.matchAll() 方法接收一个正则表达式作为参数，返回一个迭代器对象。该迭代器对象可以用于迭代一个字符串中所有匹配正则表达式的结果。下面是一个基本的示例：
const str = 'Hello World! Hello ES10!';
const regex = /Hello/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}上面的例子中，我们使用 /Hello/g 正则表达式来匹配字符串中所有的 "Hello" 子串。matchAll() 方法返回一个迭代器对象，我们可以使用 for...of 循环来遍历迭代器中的每一个匹配结果。在每一次循环中，我们可以使用 match 变量来获取当前的匹配结果。运行上述代码，我们可以得到以下结果：
["Hello", index: 0, input: "Hello World! Hello ES10!", groups: undefined] ["Hello", index: 13, input: "Hello World! Hello ES10!", groups: undefined]
从结果中我们可以看到，迭代器中包含了两个匹配结果。每一个匹配结果都是一个数组，包含了匹配到的字符串、匹配到的字符串的起始位置、匹配到的字符串所在的原始字符串以及匹配结果的分组信息。
matchAll 方法的进阶用法
除了基本的用法之外，String.prototype.matchAll() 方法还提供了一些进阶的用法，可以帮助我们更加灵活地处理字符串。
获取匹配结果的分组信息
在正则表达式中，我们可以使用分组来将匹配结果进行分组。在 String.prototype.matchAll() 方法中，我们可以通过访问匹配结果的 groups 属性来获取匹配结果的分组信息。下面是一个示例：
const str = 'Hello World! Hello ES10!';
const regex = /(?<hello>Hello) (?<world>World)/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match.groups);
}上面的例子中，我们使用 /Hello/g 正则表达式来匹配字符串中所有的 "Hello" 子串。在正则表达式中，我们使用 (?<group_name>...) 语法来定义一个分组，并为这个分组指定一个名称。在每一次循环中，我们可以使用 match.groups 来获取当前匹配结果的分组信息。运行上述代码，我们可以得到以下结果：
{hello: "Hello", world: "World"}从结果中我们可以看到，match.groups 属性返回了一个对象，包含了所有匹配结果的分组信息。
使用可选的参数
String.prototype.matchAll() 方法还提供了一些可选的参数，可以帮助我们更加灵活地处理字符串。下面是一个示例：
const str = 'Hello World! Hello ES10!';
const regex = /Hello/g;
const matches = str.matchAll(regex);
console.log(matches.next()); // {value: ["Hello", index: 0, input: "Hello World! Hello ES10!", groups: undefined], done: false}
console.log(matches.next()); // {value: ["Hello", index: 13, input: "Hello World! Hello ES10!", groups: undefined], done: false}
console.log(matches.next()); // {value: undefined, done: true}在上面的示例中，我们使用 matches.next() 方法来获取迭代器中的下一个匹配结果。我们可以使用这个方法来控制迭代器的遍历。当迭代器中没有更多的匹配结果时，matches.next() 方法会返回一个 undefined 值，并将 done 属性设置为 true。
总结
String.prototype.matchAll() 方法为前端开发者提供了一个更加方便的方式来处理字符串。通过使用这个方法，我们可以更加灵活地处理字符串，并且可以使用正则表达式来匹配字符串中的特定子串。在实际的开发中，我们可以根据自己的需求来灵活使用这个方法，从而更加高效地处理字符串。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6562c02fd2f5e1655dc8beb5