在前端开发中，我们常常需要对字符串进行操作和处理，例如正则表达式匹配。在 ES10 中，String 类型新增了 matchAll() 方法，该方法可以帮助我们更简单地匹配多个结果。
matchAll() 方法简介
matchAll() 方法用于在字符串中寻找所有符合正则表达式的子串，并返回一个迭代器。该迭代器可以用于遍历所有匹配结果，并提取需要的信息。
该方法的语法如下：
string.matchAll(regexp)
其中，regexp 表示正则表达式对象，可以是直接量或者使用 RegExp 构造函数创建的对象。该方法返回一个迭代器对象，可以通过 for...of 循环进行遍历。
matchAll() 方法应用
现在，我们来看一个实际的例子。假设我们有一个字符串，需要从中提取电话号码。下面是一个模拟的字符串：
const str = 'Please contact us at +1-123-456-7890 or +1-234-567-8901. For emergency, dial 911.';
我们可以使用正则表达式来匹配其中的电话号码。首先，我们需要定义一个匹配规则：
const regexp = /(\+\d{1}-\d{3}-\d{3}-\d{4})/g;其中，+ 表示匹配 + 符号，\d{1} 表示匹配 1 个数字，-\d{3} 表示匹配 3 个数字和一个 - 符号，重复 3 次，即匹配电话号码的格式 +1-123-456-7890。
接下来，我们可以使用 matchAll() 方法来匹配所有的电话号码，代码如下：
const matches = str.matchAll(regexp);
for (const match of matches) {
console.log(match[1]);
}运行上述代码，输出结果如下：
+1-123-456-7890 +1-234-567-8901
上述代码中，我们使用 for...of 循环遍历匹配结果迭代器，其中每个迭代器对象都包含一个 groups 属性和一个 index 属性。groups 属性是一个对象，包含所有的捕获组匹配的结果，index 属性表示匹配结果在字符串中的索引位置。
需要注意的是，matchAll() 方法仅在支持 ES10 版本的浏览器中才可以使用。如果需要在低版本浏览器中使用该方法，可以使用 babel 等工具进行转换。
总结
通过以上例子，我们可以看到，matchAll() 方法简化了正则表达式匹配的流程，帮助我们更轻松地获取多个匹配结果。在实际开发中，我们也可以将该方法应用到其他场景中，例如从 HTML 文档中提取特定标签或者属性等。同时，我们需要注意浏览器兼容性，避免低版本浏览器无法使用该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e16ce5f6b2d6eab3c9664e