在 ECMAScript 2020（ES11）中，新增了一个非常实用的方法：String.prototype.matchAll。这个方法可以帮助我们更方便地匹配字符串中的多个子串，并且返回一个迭代器，可以方便地遍历匹配结果。本文将详细介绍这个方法的用法和示例。
什么是 String.prototype.matchAll 方法
String.prototype.matchAll 方法是一个字符串方法，它可以在一个字符串中查找多个匹配的子串，并返回一个迭代器，遍历每个匹配的结果。这个方法的语法如下：
str.matchAll(regexp)
其中，str 是要匹配的字符串，regexp 是一个正则表达式，用于匹配字符串中的子串。
如何使用 String.prototype.matchAll 方法
使用 String.prototype.matchAll 方法非常简单，只需要传入一个正则表达式即可。下面是一个示例：
const str = 'Hello World, Hello JavaScript'; const regex = /Hello/g; const matches = str.matchAll(regex);
这个示例中，我们定义了一个字符串 str，然后定义了一个正则表达式 regex，用于匹配字符串中的 Hello 子串。接下来，我们调用 String.prototype.matchAll 方法，并传入这个正则表达式，将匹配结果保存在 matches 变量中。
注意，这里正则表达式的后面加上了一个 g，表示全局匹配。如果不加这个参数，matchAll 方法只会返回第一个匹配的结果。
String.prototype.matchAll 方法返回的结果
String.prototype.matchAll 方法返回一个迭代器对象，可以通过 for...of 循环来遍历匹配结果。迭代器的每个元素都是一个数组，包含了匹配到的子串和相关的信息。下面是一个示例：
const str = 'Hello World, Hello JavaScript';
const regex = /Hello/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}这个示例中，我们使用 for...of 循环遍历匹配结果，并打印每个结果。输出结果如下：
["Hello", index: 0, input: "Hello World, Hello JavaScript", groups: undefined] ["Hello", index: 13, input: "Hello World, Hello JavaScript", groups: undefined]
每个数组包含了三个元素：
- 第一个元素是匹配到的子串，即
Hello。 - 第二个元素是匹配到的子串在原字符串中的起始位置，即
index。 - 第三个元素是原字符串，即
input。 - 第四个元素是匹配到的分组，如果正则表达式中定义了分组，就会包含在这个参数中。
String.prototype.matchAll 方法的应用场景
String.prototype.matchAll 方法非常适合用于匹配复杂的字符串，并且需要对匹配结果进行多次处理的情况。比如，我们可以使用这个方法来匹配一个 HTML 页面中的所有链接，并对每个链接进行处理。
下面是一个示例：
-- -------------------- ---- -------
----- ---- - -
----
------ ---------------------------------------------
------ -------------------------------------------
------ ---------------------------------------------
-----
--
----- ----- - -----------------------------------------
----- ------- - ---------------------
--- ------ ----- -- -------- -
----- ------ ---- - -------------- ---
--------------------- ---------
-这个示例中，我们定义了一个 HTML 页面的字符串。然后，我们定义了一个正则表达式，用于匹配页面中的所有链接。这个正则表达式比较复杂，它可以匹配单引号或双引号包围的 href 属性值，并且可以处理属性值中的空格。接下来，我们使用 String.prototype.matchAll 方法，将匹配结果保存在 matches 变量中。
最后，我们使用 for...of 循环遍历匹配结果，并对每个链接进行处理。输出结果如下：
<a href="https://www.google.com">Google</a>: https://www.google.com <a href="https://www.baidu.com">Baidu</a>: https://www.baidu.com <a href="https://www.github.com">GitHub</a>: https://www.github.com
总结
String.prototype.matchAll 方法是 ECMAScript 2020（ES11）中的一个新特性，它可以帮助我们更方便地匹配字符串中的多个子串，并返回一个迭代器，可以方便地遍历匹配结果。在实际开发中，我们可以使用这个方法来处理复杂的字符串，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6618d3dcd10417a222936c7b