在前端开发中，我们经常需要对字符串进行匹配操作，而在 ES12 中，新增了 String.prototype.matchAll 方法以及 RegEx.prototype [Symbol.matchAll] 属性，可以更加方便地进行字符串匹配操作。本文将详细介绍这两个新特性的使用方法以及示例代码，并探讨其学习以及指导意义。
String.prototype.matchAll 方法
String.prototype.matchAll 方法用于返回一个迭代器，该迭代器可以遍历一个字符串中所有满足正则表达式的匹配结果。该方法接收一个正则表达式作为参数，并返回一个迭代器对象，该对象可以用于遍历所有匹配结果。
示例代码：
const str = 'hello world'; const regex = /l/g; const matches = str.matchAll(regex); for (const match of matches) { console.log(match); }
上述代码中，我们先定义了一个字符串 str，然后定义了一个正则表达式 regex，该正则表达式用于匹配字符串中所有的 l 字符。接着，我们调用了 str.matchAll(regex) 方法，返回了一个迭代器对象 matches。最后，我们使用 for...of 循环遍历了迭代器对象中的所有匹配结果，并将其打印到控制台中。
输出结果：
["l", index: 2, input: "hello world", groups: undefined] ["l", index: 3, input: "hello world", groups: undefined]
可以看到，该方法返回的迭代器对象包含了所有匹配结果的信息，包括匹配的字符串、匹配的位置（索引）以及原始字符串等信息。
需要注意的是，该方法返回的迭代器对象只能遍历一次，即无法重复使用。如果需要重新遍历所有匹配结果，需要重新调用 str.matchAll(regex) 方法获取新的迭代器对象。
RegEx.prototype [Symbol.matchAll] 属性
RegEx.prototype [Symbol.matchAll] 属性是一个内置的 Symbol 值，用于定义正则表达式对象的默认的 matchAll 方法。该属性可以被自定义，用于重写正则表达式对象的默认 matchAll 方法。
示例代码：
-- -------------------- ---- ------- ----- -------- ------- ------ - ---------------------- - ----- ------- - --- --- ----- - ----- ----- ------- - --------------- --- ----- - -------------------- - ------ --------------------------- - - ----- ----- - --- ------------- ----- ----- --- - ------ ------- ----- ------- - -------------------- --- ------ ----- -- -------- - ------------------- -展开代码
上述代码中，我们定义了一个自定义的正则表达式类 MyRegExp，继承自原生的 RegExp 类。我们重写了该类的 [Symbol.matchAll] 方法，该方法使用了 this.exec(str) 方法来获取字符串中所有匹配的结果，并将其保存到一个数组中。最后，我们调用了数组对象的 Symbol.iterator 方法返回一个迭代器对象，并将其作为该方法的返回值。
接着，我们创建了一个 MyRegExp 类的实例 regex，并将其传递给 str.matchAll(regex) 方法来获取匹配结果。最后，我们使用 for...of 循环遍历了迭代器对象中的所有匹配结果，并将其打印到控制台中。
输出结果：
["l", index: 2, input: "hello world", groups: undefined] ["l", index: 3, input: "hello world", groups: undefined]
可以看到，我们成功地重写了正则表达式对象的默认 matchAll 方法，并实现了与原生方法相同的功能。
学习以及指导意义
ES12 中的 String.prototype.matchAll 方法以及 RegEx.prototype [Symbol.matchAll] 属性为我们提供了更加方便的字符串匹配操作方式，可以更加高效地处理字符串中的匹配结果。掌握这两个新特性可以提高我们的字符串处理能力，同时也可以提高代码的可读性和可维护性。
需要注意的是，在使用 matchAll 方法时，我们需要注意其返回值是一个迭代器对象，无法直接获取所有匹配结果的数组。如果需要获取所有匹配结果的数组，可以使用 Array.from(matches) 方法将迭代器对象转换为数组。
在使用 [Symbol.matchAll] 属性时，我们需要注意该属性是一个内置的 Symbol 值，重写该属性可能会影响到正则表达式对象的其他方法。因此，在重写该属性时，需要仔细考虑其影响范围，并进行充分的测试和验证。
总之，学习和掌握 ES12 中的 String.prototype.matchAll 方法以及 RegEx.prototype [Symbol.matchAll] 属性对于提高我们的前端开发能力和代码质量都具有重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d56404a941bf7134a07210
