在 ES9 中，JavaScript 新增了一个非常实用的字符串方法 matchAll()。这个方法能够在字符串中查找所有匹配一个正则表达式的子串，并返回一个迭代器对象。本文将详细介绍 matchAll() 的用法，并提供一些示例代码，帮助读者更好地了解和掌握这个方法。
什么是 String.prototype.matchAll()？
matchAll() 是 String.prototype 对象的一个方法。它接收一个正则表达式作为参数，然后在调用它的字符串中找到所有与该正则表达式匹配的子串，并将它们放入一个迭代器对象中返回。迭代器对象的遍历结果是一个数组，每个数组元素代表一个匹配结果。数组元素的结构如下图所示：
从上图可以看出，数组元素中包含了匹配到的完整字符串、字符串中匹配的正则表达式的分组、匹配到的子字符串在整个字符串中的起始索引位置和匹配到的子字符串的截至索引位置这四个属性。这些属性能够帮助我们在处理字符串时更加灵活和方便。
如何使用 String.prototype.matchAll()？
使用 matchAll() 很简单，只需将要匹配的正则表达式作为参数传入即可。例如，下面的代码片段中，我们可以看到如何使用 matchAll() 查找一个字符串中匹配正则表达式 /hello/g 的所有子串：
const str = "hello, world! hello, es9!";
const reg = /hello/g;
const matches = str.matchAll(reg);
for (const match of matches) {
console.log(match);
}执行上面的代码，我们可以得到如下输出：
Array [ "hello", "hello" ] Array [ "hello", "hello" ]
从输出结果中我们可以看到，matchAll() 返回的迭代器对象被遍历了两次，因为这个字符串里有两个匹配的子串。对于每个匹配结果，我们都能够很方便地访问到它的四个属性，从而实现各种操作。
示例：使用 String.prototype.matchAll() 匹配多语言翻译
下面通过一个实际的示例演示如何使用 matchAll() 匹配多语言翻译。
const str = "Hello, world!\nBonjour, le monde!\n你好，世界！\nこんにちは、世界！";
const reg = /(.+?), (.+?)!/g;
for (const match of str.matchAll(reg)) {
const [full, text, lang] = match;
console.log(`Text: ${text}, Lang: ${lang}`);
}上述代码中，我们定义了一个包含多个语言翻译的字符串，然后使用 /^(.+?), (.+?)!$/g 正则表达式匹配这个字符串中所有的翻译结果。对于每个匹配结果，我们从中提取了 Text 和 Lang 两个属性，将其打印到控制台上。执行这段代码，我们可以得到如下输出：
Text: Hello, world, Lang: en Text: Bonjour, le monde, Lang: fr Text: 你好，世界, Lang: zh Text: こんにちは、世界, Lang: ja
这个示例展示了如何使用 matchAll() 在一个多语言翻译字符串中匹配所有的翻译结果，并将每个翻译结果的文本和语言两个属性提取出来进行处理。这种方法可以帮助我们在一些复杂的应用场景下更加高效地解决问题。
总结
在本文中，我们详细介绍了 ES9 中 String.prototype.matchAll() 方法的用法。这个方法能够帮助我们在一个长字符串中匹配所有符合正则表达式的子串，并将它们封装在一个迭代器对象中便于处理。通过本文的介绍和示例代码，相信读者对 matchAll() 的使用和应用已有了更深入的了解。如果你在开发过程中也遇到了类似的问题和情况，不妨试着使用 matchAll()，相信它会给你带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481803d48841e98940f9d1a