在 ECMAScript 2021（即 ES12）中，新增了一个更加强大的 String.prototype.matchAll() 方法来解决一些在之前版本中难以处理的问题。这个方法可以返回一个 Iterator 对象，其中包含符合指定正则表达式的所有匹配结果，包括每个匹配结果的详细信息。虽然这个方法非常实用，但是使用时需要注意一些问题。
问题 1：Iterator 的使用
String.prototype.matchAll() 返回的是一个 Iterator 对象，只有在使用它时才会执行真正的匹配操作，这就意味着你需要使用 for-of 循环或者 Array.from() 或者其他可以处理 Iterator 对象的方法来获取所有的匹配结果。
// javascriptcn.com 代码示例
const str = 'hello world hello world';
const regex = /hello/g;
const matches = str.matchAll(regex);
// 使用 for-of 循环获取所有匹配结果
for (const match of matches) {
console.log(match);
}
// 使用 Array.from() 获取所有匹配结果
const matchesArray = Array.from(matches);
console.log(matchesArray);问题 2：正则表达式的全局匹配
String.prototype.matchAll() 使用的正则表达式如果不带全局标志（g），则只会返回第一个匹配结果。在使用这个方法时必须要注意这个问题。
const str = 'hello world hello world';
const regex = /hello/; // 这个正则表达式不带全局标志
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}上述代码只会打印一次匹配结果，因为正则表达式没有使用全局标志。如果需要匹配所有结果，则必须带上全局标志。
问题 3：匹配结果的详细信息
String.prototype.matchAll() 返回的 Iterator 对象中包含了所有匹配结果的详细信息，包括索引、匹配的字符串、捕获组等内容。这个结果虽然非常丰富，但是在某些情况下可能会造成不必要的复杂度。
// javascriptcn.com 代码示例
// 一个具有捕获组的正则表达式
const regexWithGroups = /(hello) (world)/g;
const str = 'hello world';
const matches = str.matchAll(regexWithGroups);
for (const match of matches) {
console.log(match);
}上述代码会打印出包含了索引、匹配的字符串、捕获组等信息的匹配结果。如果只需要获取匹配的字符串，则需要进行额外的处理。
解决方式
- 使用 for-of 循环或者 Array.from() 方法来获取所有的匹配结果；
- 要记得使用全局标志（g）来获取所有的匹配结果；
- 可以使用解构语法来抽取所需的信息。
// 使用解构语法来获取匹配字符串
const str = 'hello world hello world';
const regex = /hello/g;
for (const [match] of str.matchAll(regex)) {
console.log(match);
}上述代码只打印了匹配的字符串，简化了匹配结果并且将代码可读性提高了。
总结
String.prototype.matchAll() 方法是一个非常实用的方法，但是在使用时必须注意 Iterator 对象的使用方式以及正则表达式的全局匹配标志等问题。如果需要简化匹配结果，可以使用解构语法来只获取所需的数据，让代码更加简单易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c96c37d4982a6eb60b4f1