在 ES10 中，新引入了 String.prototype.matchAll 方法，该方法可以配合正则表达式匹配字符串，并返回一个迭代器对象，用于遍历所有匹配的结果。该方法非常有用，尤其是在字符串处理和数据抽取方面。本文将对该方法的使用和特性做出详细的讲解，以供广大前端开发者参考学习和使用。
String.prototype.matchAll() 的定义和语法
String.prototype.matchAll() 是 String 对象的一个实例方法。它的语法如下：
-----------------------
其中 string 是待匹配的字符串，regexp 是正则表达式对象，该方法返回一个迭代器对象，可以遍历所有匹配的结果。
String.prototype.matchAll() 的特点
String.prototype.matchAll() 方法具有以下几个特点：
- 支持全局匹配：可以匹配字符串中的所有可能结果，而不仅仅是第一个匹配结果。
- 返回迭代器对象：该方法返回一个迭代器对象，可以遍历所有匹配的结果，方便处理多个匹配结果。
- 对于没有匹配结果的字符串，返回 null，而不是空数组。
- 在进行全局匹配的同时，可以匹配子表达式的内容，方便抽取更细粒度的数据。
String.prototype.matchAll() 的使用示例
为了更好地理解 String.prototype.matchAll() 的使用和特性，下面给出几个简单的使用示例。
示例一：基本用法
先来看一个最简单的用法：
----- --- - -- ---- ----------- ---------- -- ------- ----- --- - -------------- --- ------ ----- -- ------------------ - ------------------- -
输出结果如下：
-------------- ------ -- ------ -- ---- ----------- ---------- -- ------- ------- ---------- -------------- ------ --- ------ -- ---- ----------- ---------- -- ------- ------- ----------
上述代码中，我们使用了正则表达式 /JavaScript/g 来匹配字符串 str 中的所有 JavaScript，然后使用 for...of 循环遍历匹配结果并打印。
示例二：匹配子表达式
在正则表达式中可以使用括号来匹配子表达式，这些子表达式也可以在 String.prototype.matchAll() 中进行匹配。比如：
----- --- - ------ ---- ---- --- ----- ----- ---- ----- ----- --- - ------ ------ ---- --------- --- ------ ----- -- ------------------ - --------------------- ---------- -
输出结果如下：
--- -- ---- --
上述代码中，我们使用正则表达式 /name: (\w+), age: (\d+);/g 来匹配字符串 str 中的所有名字和年龄，然后使用 for...of 循环遍历匹配结果并打印。
示例三：匹配关键字
在某些应用场景中，需要匹配特定的关键字，并将它们输出到一个数组中。这时可以使用 Array.prototype.from() 方法将迭代器对象转换为数组，如下所示：
----- --- - ------- -------- ----- --- - ----------- ----- -------- - ----------------------------- ----- -- ---------- ---------------------- -- --------- --------
上述代码中，我们使用正则表达式 /\b\w+\b/g 来匹配字符串 str 中的单词，并通过 Array.prototype.from() 方法将迭代器对象转换为数组。这个方法还接受一个回调函数，用于对匹配结果进行处理，我们在这里直接返回了 match[0]。
String.prototype.matchAll() 的注意事项
在使用 String.prototype.matchAll() 方法时需要注意以下几个问题：
- 该方法不支持 placeholder，即在正则表达式中不能使用“$&”等占位符，需要使用具体的正则字符来匹配。
- 在使用 String.prototype.matchAll() 进行全局匹配时，如果正则表达式中包含子表达式，则 match 对象中仅返回第一个匹配的结果，需要使用 match.index 和 RegExp.lastIndex 等属性来获取更多的匹配结果。
- 迭代器对象是惰性的，只在需要时才会生成下一个匹配结果，如果不使用 for...of 或 Array.from() 等方法来遍历迭代器对象，则不会生成任何匹配结果。
结论
通过本文的讲解，我们了解到 String.prototype.matchAll() 方法可以方便地进行字符串匹配和数据抽取，尤其是在全局匹配和子表达式匹配方面具有非常强的功能。在实际的前端开发中，我们可以根据具体的需求灵活使用该方法，提高程序的处理效率和代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6716442cad1e889fe21ba9a6