在 ES9 中，JavaScript 新增了 String.prototype.matchAll 方法，该方法可以返回字符串中所有匹配某个正则表达式的子串，而不仅仅是第一个匹配项。这对于前端开发来说，是一个非常实用的功能，可以帮助我们处理一些复杂的字符串操作。
1. String.prototype.matchAll 方法的使用
String.prototype.matchAll 方法接收一个正则表达式作为参数，返回一个迭代器对象，该对象可以迭代字符串中所有匹配该正则表达式的子串。下面是一个示例：
const str = 'hello world, hello JavaScript';
const reg = /hello/g;
const matches = str.matchAll(reg);
for (const match of matches) {
console.log(match);
}输出结果如下：
// 第一个匹配项 ["hello", index: 0, input: "hello world, hello JavaScript", groups: undefined] // 第二个匹配项 ["hello", index: 13, input: "hello world, hello JavaScript", groups: undefined]
可以看到，matchAll 方法返回了一个迭代器对象，我们可以通过 for...of 循环来遍历所有匹配项。每个匹配项都是一个数组，第一个元素是匹配到的子串，其余元素包括 index（匹配子串的起始位置）、input（原始字符串）和 groups（如果正则表达式中使用了分组，则包括每个分组的匹配结果）。
2. String.prototype.matchAll 方法的兼容性
由于 String.prototype.matchAll 方法是 ES9 中新增的，所以在一些老旧的浏览器中可能不支持该方法。为了保证代码的兼容性，我们可以使用 polyfill 来实现该方法。
下面是一个简单的 polyfill 实现：
// javascriptcn.com 代码示例
if (!String.prototype.matchAll) {
String.prototype.matchAll = function(regexp) {
const matches = [];
this.replace(regexp, function() {
const match = Array.prototype.slice.call(arguments, 0, -2);
match.index = arguments[arguments.length - 2];
match.input = arguments[arguments.length - 1];
matches.push(match);
});
return matches[Symbol.iterator]();
};
}该 polyfill 实现与官方的实现略有不同，但是功能是相同的。我们可以在代码中引入该 polyfill，以保证在所有浏览器中都可以使用 String.prototype.matchAll 方法。
3. String.prototype.matchAll 方法的应用场景
String.prototype.matchAll 方法可以帮助我们处理一些复杂的字符串操作。下面是一些示例：
3.1 提取所有邮件地址
假设我们有一个字符串，其中包含多个邮件地址，我们希望将所有邮件地址提取出来。可以使用如下代码：
const str = '我的邮箱是test1@test.com，你的邮箱是test2@test.com';
const reg = /\b\w+@\w+\.\w+\b/g;
const matches = str.matchAll(reg);
for (const match of matches) {
console.log(match[0]);
}输出结果如下：
test1@test.com test2@test.com
3.2 替换所有匹配项
假设我们有一个字符串，其中包含多个匹配项，我们希望将所有匹配项替换为某个字符串。可以使用如下代码：
const str = 'hello world, hello JavaScript'; const reg = /hello/g; const replaceStr = 'hi'; const newStr = str.replace(reg, replaceStr); console.log(newStr); // 输出：hi world, hi JavaScript
3.3 检查字符串中是否包含某个子串
假设我们有一个字符串，我们希望检查该字符串中是否包含某个子串。可以使用如下代码：
// javascriptcn.com 代码示例
const str = 'hello world, hello JavaScript';
const reg = /hello/g;
const matches = str.matchAll(reg);
if (matches.next().done) {
console.log('字符串中不包含该子串');
} else {
console.log('字符串中包含该子串');
}4. 总结
String.prototype.matchAll 方法是 ES9 中新增的一个非常实用的方法，可以帮助我们处理一些复杂的字符串操作。在使用该方法时，需要注意其兼容性，并可以使用 polyfill 来实现该方法。我们可以根据具体的需求，灵活运用该方法，以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658677b7d2f5e1655d0ecd84