在 ES11 中，新增了 String.prototype.matchAll() 方法，它可以更方便地匹配字符串中的所有符合条件的子串。与之前的 String.prototype.match() 方法相比，它可以返回一个迭代器，方便我们遍历所有匹配的结果。本文将详细介绍这两个方法的使用，以及它们的区别和优缺点。
String.prototype.match() 方法
String.prototype.match() 方法可以用正则表达式匹配字符串中的子串，返回一个数组。例如：
const str = 'hello world'; const matches = str.match(/o/g); console.log(matches); // ['o', 'o']
这里的正则表达式 /o/g 表示全局匹配所有的字符 o。match() 方法返回的是一个数组，其中包含了所有匹配的结果。
但是，match() 方法存在一些问题。例如，如果我们想匹配一个字符串中所有符合条件的子串，但是正则表达式中没有使用全局标志 g，那么它只会返回第一个匹配的结果。
const str = 'hello world'; const matches = str.match(/o/); console.log(matches); // ['o']
这时，我们可以使用 String.prototype.matchAll() 方法来解决这个问题。
String.prototype.matchAll() 方法
String.prototype.matchAll() 方法可以用于匹配字符串中所有符合条件的子串，返回一个迭代器，可以用 for...of 循环遍历所有匹配结果。例如：
const str = 'hello world'; const matches = str.matchAll(/o/g); for (const match of matches) { console.log(match); }
这里的正则表达式 /o/g 表示全局匹配所有的字符 o。matchAll() 方法返回的是一个迭代器，可以用 for...of 循环遍历所有匹配的结果。
需要注意的是，matchAll() 方法返回的迭代器并不是一个数组，而是一个可迭代对象。如果我们需要将其转换为数组，可以使用 Array.from() 方法。
const str = 'hello world'; const matches = Array.from(str.matchAll(/o/g)); console.log(matches); // [['o', index: 4, input: 'hello world'], ['o', index: 7, input: 'hello world']]
这里使用了 Array.from() 方法将迭代器转换为了数组。其中，每个数组元素都是一个匹配结果，包含了匹配的字符串、匹配位置和原始字符串。
区别与优缺点
String.prototype.matchAll() 方法与 String.prototype.match() 方法的最大区别在于，前者返回的是一个迭代器，可以遍历所有匹配的结果，而后者只返回第一个匹配的结果。这使得 matchAll() 方法更加灵活，可以用于匹配任意数量的子串。
但是，matchAll() 方法也存在一些缺点。由于它返回的是一个迭代器，因此无法直接使用数组的一些方法，例如 map()、filter() 和 reduce()。如果需要使用这些方法，需要先将迭代器转换为数组。
此外，matchAll() 方法也不支持 IE 浏览器，因此在编写兼容性较高的代码时需要注意。
示例代码
下面是一个使用 String.prototype.matchAll() 方法的示例代码。它可以匹配一段文本中所有包含关键词的句子，并将其加粗显示。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- - --------------------------- - ------------------------ ------------ ------- ------ ---- ------------- ------------- -- - ----------- -------- ---- -- ------ ---- -- --- ------------ -- -- - ---------- -------- ---- -- ---- -- ----- --- ---- ---------- -- ---- -- ------ ------- --- ----------- --- ---------- -------- --- ---- ---------- ---------- --- --------- ---- ---- -- ------ -- ------- --- ------------- ---- -- ------ ------- --- ---- ----- ---------- ------- - --- -- ------ -------- --- ------ --- --- ---- ---------- -- ------ ------- --- ------------ ---- ---------------- ------ -------- ----- ------- - --------------------------------------------- ----- -------- - -------------- ---- ------------- -------- ---------- ------- ----- ----- - --- --------------------------------- ------ ----- ------- - ------------------------------------ --- ------ ----- -- -------- - ----- -------- - ------------------------ ----------------------------- - -------- - --------------------------------- - ------------------------------- ----- ----------- - --------------------- ----- ----------- - -------------------------- ------------- ----- ---------- - ----------------------------- ------------- -------------------------------------------- - ----------- - --------- ------- -------展开代码
在这个示例代码中，我们首先获取了一个包含文本的 div 元素。然后，定义了一个包含关键词的数组和一个正则表达式，用于匹配文本中所有包含关键词的句子。接着，使用 matchAll() 方法获取了所有匹配的结果，并使用 for...of 循环遍历每个匹配结果。在循环中，首先获取了匹配结果所在的句子，然后将关键词加粗显示，并将新的句子替换原来的句子。最后，将新的文本显示在了 div 元素中。
通过这个示例代码，我们可以更加深入地了解 String.prototype.matchAll() 方法的使用。它可以帮助我们更加方便地匹配字符串中的子串，提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d42af0a941bf71347db846
