随着时间的推移和技术的发展，JavaScript 语言也在不断地更新和完善。2021 年的 ECMAScript 2021 版本（也叫 ES12）引入了新的语法 MatchAll。本文将对这一新语法进行详细的介绍和解释，并通过示例代码来进一步阐述它的学习和指导意义。
MatchAll 的定义
MatchAll 是一种用于字符串匹配的方法，它可以查找一个字符串中与正则表达式匹配的所有子串，并返回这些子串的详细信息，包括子串的起始位置、结束位置和匹配到的内容。
在以前的版本中，要想查找多个子串，必须使用 g 选项的正则表达式，并将它们全部保存在一个数组中。而现在，有了 MatchAll 方法，只需一个简单的调用即可返回所有匹配的子串。
MatchAll 的语法
MatchAll 方法的语法非常简单，只需要在字符串后面加上 .matchAll(正则表达式) 即可。如下面的例子：
let str = 'This is a test string.' let regExp = /\w+/g let matched = str.matchAll(regExp) console.log(matched)
在这个例子中，我们定义了一个字符串 str 和一个正则表达式 /\w+/g，然后使用 str.matchAll(regExp) 方法来查找所有匹配的子串，将它们保存到 matched 变量中，并将变量输出到控制台。
MatchAll 的返回值
MatchAll 方法返回的是一个迭代器（Iterator），它可以用于循环遍历所有匹配的子串。迭代器是一个 IteratorResult 对象，它包含两个值：value 和 done。其中，value 是匹配到的子串的详细信息，如下所示：
let str = 'This is a test string.'
let regExp = /\w+/g
let matched = str.matchAll(regExp)
// 遍历每一个匹配到的子串
for(let match of matched) {
console.log(match)
}输出结果如下所示：
Array [ "This", index: 0, input: "This is a test string.", groups: undefined ] Array [ "is", index: 5, input: "This is a test string.", groups: undefined ] Array [ "a", index: 8, input: "This is a test string.", groups: undefined ] Array [ "test", index: 10, input: "This is a test string.", groups: undefined ] Array [ "string", index: 15, input: "This is a test string.", groups: undefined ]
MatchAll 的应用场景
MatchAll 方法的应用场景非常广泛，特别是在处理字符串时。以下是一些使用 MatchAll 方法的示例：
1. 将所有匹配的子串替换成新字符串
let str = 'This is a test string.' let regExp = /\w+/g let newStr = str.replace(regExp, '***') console.log(newStr) // '**** **** * **** ******'
2. 提取所有匹配的子串并保存到数组中
let str = 'This is a test string.' let regExp = /\w+/g let matched = [...str.matchAll(regExp)] console.log(matched) // [ Array(4), Array(2), Array(1) ]
3. 求出匹配到的所有子串的长度之和
-- -------------------- ---- ------- --- --- - ----- -- - ---- -------- --- ------ - ------ --- ------- - -------------------- --- --- - - ------- ----- -- -------- - --- -- --------------- - ---------------- -- --
总结
MatchAll 是一个非常有用的语法，在处理字符串时可以帮助我们更方便地查找和处理多个字符串。本文介绍了 MatchAll 的定义、语法和返回值，并通过实例代码演示了它的使用场景和指导意义。希望这篇文章能够帮助读者更深入地了解 ECMAScript 2021 的新功能，并在实际工作中灵活运用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb84bf5ad90b6d0420ed9a