如果您的前端工作中需要解析字符串，那么您一定熟悉 String.prototype.match() 方法。不过，在 ES2021 中，新增了 String.prototype.matchAll() 方法，这个方法可以更方便地解析字符串。
理解 matchAll 方法
首先，让我们了解 matchAll 方法的定义：
str.matchAll(regexp)
这个方法返回一个迭代器，您可以使用 for...of 循环，遍历所有符合正则表达式 regexp 的字符串。比如下面的示例：
const str = 'Hello, World! How are you?'
const regex = /\w+/g
for (const match of str.matchAll(regex)) {
console.log(match)
}它会输出以下内容：
["Hello"] ["World"] ["How"] ["are"] ["you"]
可以看到， matchAll 方法会返回一个迭代器，我们通过 for...of 将每一个匹配项输出了出来。
为什么使用 matchAll 而不是 match？
如果您仅仅需要获取一个字符串中所有匹配的值，那么 match 方法或许已经可以满足您的需求。但 matchAll 方法相对于 match 方法具有以下优点：
匹配所有结果，不会停止
match 方法会停止在发现第一个匹配项时返回结果。但在使用 matchAll 方法时，迭代器会遍历整个字符串，从而获取所有的匹配项。因此，使用 matchAll 方法可以更好地获取字符串中的所有匹配项。
更方便的访问捕获组内容
在 match 方法中，如果您需要获取捕获组内容，必须通过正则表达式对象的 exec 方法进行额外的处理。而在 matchAll 方法中，迭代器会返回一个数组，其中第一个元素是匹配的整个字符串，后续的元素是捕获组匹配的值。这使得访问捕获组内容变得更加方便。
使用更加灵活的正则表达式
与 match 方法不同的是， matchAll 方法接受的正则表达式可以是具有全局标志的表达式，这使得该方法比 match 更适用于一些具有复杂匹配需求的场景。
示例代码
下面的示例展示了使用 matchAll 方法解析一个 URL，获取其中的协议、主机名以及路径信息：
-- -------------------- ---- ------- ----- --- - ---------------------------------------------------------- ----- ----- - ----------------------------------- ----- ------------ - ------------------- --- ------ ----- -- ------------- - ------------------ -------- ------ ------------------------ --------- ------------------------ --------- -------------------- -------- -- ---- -
输出如下：
Match found: ["https://www.example.com/products/category", "https", "www.example.com", "/products/category"] Protocol: https Hostname: www.example.com Path: /products/category
总结
在本文中，我们介绍了 String.prototype.matchAll() 方法，讨论了它与 match 方法的区别，并提供了一个示例代码，使用 matchAll 方法解析 URL。希望通过本文的介绍，您能更加方便地解析字符串，提高前端工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f1e537d4982a6eb820e23