「ES12」中引入了 RegExp 的 matchAll() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 开发中，正则表达式一直是非常重要的一部分，它可以帮助我们处理和筛选字符串，但是在以往的版本中，正则表达式的处理有一定的局限性，比如只能通过 exec() 和 test() 方法获取匹配结果。但是随着 ECMAScript 2021（ES12）的发布，引入了新的 RegExp 的 matchAll() 方法，它可以帮助我们更加高效的处理正则表达式匹配相关操作。

matchAll() 方法的基本语法

matchAll() 方法是 RegExp 对象上的方法，我们可以通过创建 RegExp 实例，然后调用其 matchAll() 方法实现对字符串的正则匹配：

const str = "Hello, world! Hi, John. Hey, Mike.";

const regExp = /[A-Z]\w+/g;

const matches = regExp.matchAll(str);

上述代码中，我们通过 /[A-Z]\w+/g 的正则表达式来匹配字符串 str 中的大写字母+x个字母的字符串，返回的是一个匹配结果迭代器对象 matches 。

matchAll() 方法返回的匹配结果

matchAll() 方法返回的是一个正则匹配结果的迭代器对象，它可以通过遍历该迭代器对象，获取到所有的匹配结果及其跟踪数据。例如上述代码中，我们可以通过循环 matches，获取到所有匹配字符串及其匹配位置信息：

for (const match of matches){
  console.log(match[0], match.index, match.input);
}
// 输出:
// Hello 0 Hello, world! Hi, John. Hey, Mike.
// Hi 14 Hello, world! Hi, John. Hey, Mike.
// Hey 24 Hello, world! Hi, John. Hey, Mike.

上述代码中，我们循环遍历了 matches 迭代器对象，获取到了每个匹配的值，以及该匹配结果在原字符串中的起始位置和原始字符串本身。

matchAll() 方法相较于 exec() 方法的优势

相对于 exec() 方法，matchAll() 方法的主要优势在于，它可以返回匹配结果迭代器对象，这意味着我们无需再次手动循环执行正则表达式匹配，而是可以直接通过迭代器遍历获取所有匹配结果，从而提高代码的可读性和效率。

举个例子，如果我们希望从一个字符串中获取所有的整数值，我们可以写出如下的代码：

const str = "1abcd23efgh45ijklm";

const regExp = /\d+/g;

let result;
while ((result = regExp.exec(str)) !== null) {
  console.log(result[0]);
}

这里我们通过 exec() 方法不断循环匹配，得到所有整数值，这种写法很容易出错、易错乱，而使用 matchAll() 可以大得优化：

const str = "1abcd23efgh45ijklm";

const regExp = /\d+/g;

for (const match of str.matchAll(regExp)){
  console.log(match[0]);
}

总结

通过上述的示例，我们可以发现，RegExp 的 matchAll() 方法对于正则表达式的处理有很大的帮助，它可以让我们更加高效地获取到所有相关的匹配结果，提高了代码的可读性和效率。所以在实际开发中，我们应该适当地运用 matchAll() 方法，从而更加方便地处理字符串的正则匹配相关操作。

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