在 ES9 中，JavaScript 新增了一个很有用的方法：String.prototype.matchAll()。它可以在字符串中查找所有匹配项，并返回一个迭代器，让我们可以方便地处理这些匹配项。在本文中，我们将探索这个方法的详细用法，并说明如何将它应用于实际开发中。
基本用法
在默认情况下，String.prototype.matchAll() 方法需要一个正则表达式作为参数，它可以匹配所有出现的子字符串。当找到一个子字符串匹配时，它会生成一个迭代器对象，其中包含匹配项的详细信息。以下是一个简单的示例：
const str = 'Hello World!';
const regex = /l/g;
const iterator = str.matchAll(regex);
for (const match of iterator) {
console.log(match[0], match.index);
}输出结果：
l 2 l 3
在这个例子中，我们使用 /l/g 正则表达式作为参数，该表达式可以匹配所有的 “l” 字符。然后我们通过 str.matchAll(regex) 方法生成一个迭代器对象，用于遍历匹配项。在 for…of 循环中，我们遍历迭代器，并打印出每个匹配项的第一个字符串和匹配字符串的起始位置。
请注意，match 有多个属性。您还可以访问 match.input 属性来获取整个匹配的字符串。
进一步探讨
在深入了解 String.prototype.matchAll() 之前，我们可以考虑一下之前解析正则表达式的方式以及查找匹配的过程。
在过去，我们通常使用 String.prototype.match() 来解析字符串中的某些模式，该方法只会返回第一个匹配项。如果要查找所有匹配项，则需要使用 RegExp.prototype.exec() 方法，直到 return 值为 null。
在上面的示例中，我们使用 for…of 循环来遍历迭代器。但是，您也可以使用 Array.from() 方法将迭代器转换为数组对象：
const str = 'Hello World!'; const regex = /l/g; const matches = Array.from(str.matchAll(regex)); console.log(matches);
输出结果：
[ ['l', 2, 'Hello World!'], ['l', 3, 'Hello World!'] ]
在这个例子中，我们将迭代器对象转换为一个数组对象，并将其存储在变量 matches 中。这个数组包含两个子数组，每个子数组都包含匹配字符串（第一个元素）、匹配字符串的起始位置（第二个元素）和整个匹配字符串（第三个元素）。
为什么是重要的？
String.prototype.matchAll() 方法之所以如此重要，是因为它可以让我们在匹配过程中快速可靠地构建复杂的逻辑。此外，它还能够返回迭代器对象，这使得我们可以轻松地对匹配到的字符串进行处理和分析。
例如，在一个大型的文本文件中搜索某一模式时，如果我们仍然使用 RegExp.prototype.exec() 来查找所有匹配项，那么用户可能需要等待较长时间，因为这个过程会对系统资源产生较大的压力。但是，String.prototype.matchAll() 方法不仅更快，而且更有效。
另外，我们也可以在 for…of 循环的每次迭代中处理每个匹配项，并使用一个数组来存储结果，最终将结果渲染到网页中：
const str = 'This is my JavaScript string.';
const regex = /([^\s]+)/g;
let result = '';
for (const match of str.matchAll(regex)) {
result += `<p>${match[0]}</p>`;
}
document.getElementById('output').innerHTML = result;在这个例子中，我们使用 /([^\s]+)/g 正则表达式查找所有非空格的字符串。在 for…of 循环中，我们遍历了所有的匹配项，并将它们以 HTML 标记的形式存储在 result 变量中。最后，我们将 result 中的所有 HTML 内容直接注入到网页中。
最后，值得一提的是，String.prototype.matchAll() 方法有很多种用法，并且这个方法可以跟各种类型的正则表达式一起使用。例如，我们可以使用具有修饰符的正则表达式，或者使用命名捕获组等更高级的特性。
总结
String.prototype.matchAll() 方法为开发者提供了一个高效且灵活的方法来处理和查找匹配项。它适用于多种场景，包括文本解析、数据清洗和动态创建 HTML 内容等。如果您想打造一个高效的 JavaScript 应用程序，那么 String.prototype.matchAll() 方法绝对是您必不可少的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e213095b1f8cacd5d0615