在 ES12 中，新增了一个非常实用的方法 String.prototype.matchAll()，它可以通过正则表达式，查找字符串中符合条件的所有匹配项，返回一个迭代器对象，其中包含所有的匹配项及其详细信息。使用该方法，可以帮助我们快速进行字符串处理和数据分析。
方法介绍
String.prototype.matchAll() 方法返回一个迭代器对象，可以迭代出所有符合正则表达式的匹配项和详细信息。该方法的语法如下：
str.matchAll(regexp)
其中，regexp 为正则表达式对象或者字符串。如果传入的是字符串，则会先将其转换为正则表达式对象。
迭代器生成器
在使用 String.prototype.matchAll() 方法之前，需要先了解一下迭代器生成器。迭代器生成器是一个带 * 的函数，它可以通过 yield 语句暂停函数执行，并返回一个符合格式的值。当再次执行该函数的 next() 方法时，函数会从 yield 语句的位置恢复执行，并返回下一个符合格式的值。当没有更多的值可以返回时，迭代器生成器会自动结束。
使用迭代器生成器可以方便地生成一个迭代器对象，用于循环遍历需要迭代的数据。
实现方式
String.prototype.matchAll() 方法返回的迭代器对象可以调用 next() 方法来遍历所有的匹配项。在每次调用 next() 方法时，都会返回一个对象，该对象包含两个主要属性：value 和 done。其中，value 属性表示当前匹配项的信息，而 done 属性则表示迭代器是否结束。
示例
下面是一个使用 String.prototype.matchAll() 方法查找字符串中所有数字的示例：
const str = "1a2b3c4d5e";
const regexp = /\d+/g; // 匹配一个或多个数字
const matches = str.matchAll(regexp);
for (const match of matches) {
console.log(match);
}输出结果如下：
// 第一次调用 next() 方法
{value: ["1"], index: 0, input: "1a2b3c4d5e", groups: undefined, done: false}
// 第二次调用 next() 方法
{value: ["2"], index: 2, input: "1a2b3c4d5e", groups: undefined, done: false}
// 第三次调用 next() 方法
{value: ["3"], index: 4, input: "1a2b3c4d5e", groups: undefined, done: false}
// 第四次调用 next() 方法
{value: ["4"], index: 6, input: "1a2b3c4d5e", groups: undefined, done: false}
// 第五次调用 next() 方法
{value: ["5"], index: 8, input: "1a2b3c4d5e", groups: undefined, done: false}
// 第六次调用 next() 方法
{value: undefined, index: undefined, input: undefined, groups: undefined, done: true}从输出结果中可以看出，迭代器对象 matches 被调用了六次 next() 方法，分别返回了对应的匹配项信息。当匹配结束时，value 属性被设置为 undefined，同时 done 属性被设置为 true，表示迭代器已经结束。
总结
String.prototype.matchAll() 方法为我们提供了一种方便高效的方式来查找字符串中所有匹配项。使用迭代器对象遍历所有匹配项信息可以帮助我们更好地处理字符串数据，提升代码的效率和可读性。在实际项目中，我们可以充分发掘该方法的潜力，提高开发效率和程序质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65900833eb4cecbf2d58f42e