随着 JavaScript 版本的不断更新，我们越来越多地拥有了各种强大的 API。其中，ES11 新增的 String.prototype.matchAll() 方法就是一项非常实用的功能，它可以让我们更加方便地进行字符串匹配操作。
本篇文章将深入探讨 String.prototype.matchAll() 方法的使用，让你能够优雅地应对字符串匹配问题，并且可以直接应用到你的开发中。
什么是 String.prototype.matchAll() 方法
在 ES11 （也就是 ES2020）中，JavaScript 引入了 String.prototype.matchAll() 方法。它是一项与 String.prototype.match() 很相似的方法，但是有一些非常重要的区别。
String.prototype.matchAll() 方法可以在整个字符串中检索与正则表达式相匹配的所有子串，并返回一个包含每个匹配结果的迭代器。与 String.prototype.match() 方法的返回值不同，String.prototype.matchAll() 方法的返回值是迭代器。
String.prototype.matchAll() 方法的语法
如下是 String.prototype.matchAll() 方法的语法：
------------------------
其中，string 是需要进行匹配操作的字符串，regexp 则是正则表达式，可以是一个正则表达式的实例或一个字符串。
String.prototype.matchAll() 返回的迭代器是什么
String.prototype.matchAll() 方法的返回值是一个迭代器，它包含了所有与正则表达式相匹配的子串信息。这个迭代器返回的是一个数组，其中第一个元素是匹配的字符串，接下来的元素依次是分组捕获的内容。
下面是示例代码：
--- ------ - ---- --- --- --- --- ----- ----- ------ - ------- ----- ------- - ------------------------ --- ------ ----- -- -------- - ------------------- -
运行上述代码得到的输出结果如下：
------- ------ -- ------ ---- --- --- --- --- ----- ------- ---------- ------- ------ --- ------ ---- --- --- --- --- ----- ------- ---------- ------- ------ --- ------ ---- --- --- --- --- ----- ------- ----------
从以上输出结果可以看出，返回的迭代器中包含的是一个个数组，每个数组代表了一个匹配的子串和分组捕获的内容（如果有的话）。
String.prototype.matchAll() 方法的使用场景
String.prototype.matchAll() 方法的使用场景非常广泛，下面是一些常见的应用场景：
分析字符串中的所有数字
我们可以使用正则表达式来分析字符串中所有的数字。通过 String.prototype.matchAll() 方法，可以很方便地获取到字符串中所有匹配的数字信息。
以下是示例代码：
--- ------ - ---- --- --- --- --- ----- ----- ------ - ------- ----- ------- - ------------------------ --- ------ ----- -- -------- - ---------------------- -
运行上述代码得到的输出结果如下：
--- --- ---
从以上输出结果可以看出，我们使用正则表达式 \d+ 来匹配字符串中的所有数字，并通过 String.prototype.matchAll() 方法获取了匹配数字的数组。接下来我们可以通过迭代器的方式将数组中的数字一个个输出。
分析 HTML 标签中的属性
在前端开发中，我们经常需要从 HTML 中提取出各种信息。如果一个 HTML 元素的属性分散在多个标签中，我们可以使用正则表达式来获取到所有的属性信息，然后使用 String.prototype.matchAll() 方法将这些属性信息处理为一个数组。
以下是示例代码：
---- ------------ ------------ ---------------------
--- ------ - ----- ------------ ------------ ----------------------- ----- ------ - ------------------------ ----- ------- - ------------------------ ----- ---------- - ------------------- - -- ------- ----- ------ -------- ------------------------
运行上述代码得到的输出结果如下：
- - ----- ----- ------ --------- -- - ----- -------- ------ ------ -- - ----- ----------------- ------ -- - -
从以上输出结果可以看出，我们使用正则表达式 ([a-z\-]+)="([^"]+)" 来匹配 HTML 元素中的所有属性，并通过 String.prototype.matchAll() 方法获取了匹配属性的数组。接下来我们使用迭代器的方式将数组中的属性一个个输出，并处理成一个对象。
总结
String.prototype.matchAll() 方法是一个非常强大的 API，它可以让我们更加方便地进行字符串匹配操作。通过使用这个 API，我们可以轻松地获取到字符串中所有符合正则表达式条件的子串信息，并将这些信息处理成我们需要的形式。
如果你想要更深入地了解 String.prototype.matchAll() 方法的使用，可以使用以上示例代码进行练习并且自己尝试使用该方法解决实际开发中的问题。相信你会发现这个 API 的强大之处，让你的代码更加优雅。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e09f92f6b2d6eab3bbf81f