ES11 中的 RegExp.matchAll() 方法：解决正则表达式的取巧问题-JavaScript中文网-JavaScript教程资源分享门户

正则表达式在前端开发中是一个非常重要的工具，它可以帮助我们快速地对字符串进行匹配和处理。在 ES6 中，JavaScript 引入了新的正则表达式特性，包括正则表达式的 u 修饰符和 y 修饰符。在 ES11 中，JavaScript 又引入了一个新的正则表达式方法：RegExp.matchAll()，这个方法可以解决正则表达式的取巧问题。

什么是正则表达式的取巧问题

在 ES6 之前，JavaScript 中的正则表达式只能使用 exec() 方法来进行匹配，这个方法在匹配全局正则表达式时，需要多次调用才能获取到所有的匹配结果。

const str = 'hello world';
const reg = /l/g;
let match;
while ((match = reg.exec(str)) !== null) {
  console.log(match[0]);
}
// 输出 l l

上面的代码是使用 exec() 方法来匹配全局正则表达式的示例。在这个示例中，我们需要使用 while 循环来多次调用 exec() 方法，从而获取到所有的匹配结果。这种方式虽然可以解决全局正则表达式的匹配问题，但是代码比较繁琐，容易出错。

RegExp.matchAll() 方法的介绍

在 ES11 中，JavaScript 引入了一个新的正则表达式方法：RegExp.matchAll()。这个方法可以直接返回一个迭代器，用来获取所有匹配结果。

const str = 'hello world';
const reg = /l/g;
for (const match of str.matchAll(reg)) {
  console.log(match[0]);
}
// 输出 l l

上面的代码是使用 matchAll() 方法来匹配全局正则表达式的示例。在这个示例中，我们可以直接使用 for...of 循环来遍历所有的匹配结果，代码比较简洁，易于理解。

RegExp.matchAll() 方法的返回值

RegExp.matchAll() 方法返回一个迭代器，这个迭代器包含了所有的匹配结果。每个匹配结果是一个数组，数组的第一个元素是匹配到的字符串，后面的元素是正则表达式中每个捕获组的匹配结果。

const str = 'hello world';
const reg = /l/g;
const matches = str.matchAll(reg);
console.log([...matches]);
// 输出 [["l", index: 2, input: "hello world"], ["l", index: 3, input: "hello world"]]

上面的代码是使用 matchAll() 方法来匹配全局正则表达式的示例。在这个示例中，我们使用了扩展运算符将迭代器转换成了数组，然后打印出了所有的匹配结果。

RegExp.matchAll() 方法的注意事项

在使用 RegExp.matchAll() 方法时，需要注意以下几点：

RegExp.matchAll() 方法只能在支持 ES11 的浏览器中使用。
RegExp.matchAll() 方法返回的迭代器是惰性求值的，只有在需要时才会计算下一个匹配结果。
如果正则表达式中没有捕获组，则匹配结果数组只包含匹配到的字符串。
如果正则表达式中有命名捕获组，则匹配结果数组中会包含一个 groups 属性，这个属性是一个对象，包含了所有命名捕获组的匹配结果。

总结

在 ES11 中，JavaScript 引入了一个新的正则表达式方法：RegExp.matchAll()。这个方法可以直接返回一个迭代器，用来获取所有匹配结果。使用这个方法可以解决正则表达式的取巧问题，使代码更加简洁、易于理解。但是需要注意该方法只能在支持 ES11 的浏览器中使用，且返回的迭代器是惰性求值的。

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