在前端开发中，字符串操作是非常常见的。而在 ES11 标准里加入了一个新的字符串操作函数 String.prototype.matchAll()。这个函数可以更方便地获取一个字符串中所有匹配指定正则表达式的信息，同时还可以获取每一个匹配结果及其详细信息。
matchAll() 函数的基本使用方法
matchAll() 函数的语法形式如下：
------------------------
其中 string 表示需要进行匹配的字符串，regexp 则是需要使用的正则表达式。
matchAll() 函数返回一个迭代器对象，我们可以使用 for...of 循环语句来遍历迭代器对象并获取每个匹配的结果。
下面是一个简单的例子：
----- --- - ------ ----------- ---------- ------------- ----- ------ - ------ -------- ----- ------- - --------------------- --- ------ ----- -- -------- - ------------------- -
在上面的例子中，我们定义了一个包含多个匹配的字符串 str，同时定义了一个匹配正则表达式 regexp，用 matchAll() 函数去获取所有匹配。
运行上述代码，我们会得到如下的输出结果：
----- - ------ -------- ------- - ----- - ------ ------- ------ - ----- - ------ ------------- ------------ -
上面的输出结果包含了每个匹配的详细信息。
matchAll() 函数的详细信息
matchAll() 函数返回的迭代器对象中每一项都是一个数组，其中包含了完整的匹配信息。具体来说，数组中包含以下信息：
- 第 0 项：完整的匹配信息；
- 第 1 至 n 项（n 为正则表达式中分组的个数）：每个分组的匹配信息；
- index：匹配的起始位置；
- input：原始的匹配字符串。
上面的信息可以方便的用于在匹配的时候进行详细的操作。
实际应用场景
在实际的开发场景中，matchAll() 函数可以方便地被应用到正则表达式的分组匹配、多次匹配等场景中。
下面是一个例子，我们使用 matchAll() 函数来获取一个字符串中所有浮点数，并将其转化成数值类型：
----- --- - ---- --- ----- ----- ------ - ------------ ----- ------- - --------------------- ----- ------- - --- --- ------ ----- -- -------- - ----------------------------------- - ---------------------
在上面的例子中，我们定义了一个有多个浮点数的字符串，使用匹配正则表达式 /d+\.\d+/g 来获取所有浮点数，然后通过 for...of 循环语句遍历 matchAll() 函数返回的迭代器对象来获取每个浮点数，并用 parseFloat() 函数将其转化为数值类型。
运行上述代码，我们会得到以下的输出结果：
----- - ---- ---- --- -
这样我们就方便地获取所有浮点数，并将其转化成数值类型了。
总结
matchAll() 函数可以方便地获取一个字符串中多个匹配，不仅包含了匹配的内容，还包含了每个匹配的详细信息，可以方便地在实际开发中进行分组、过滤等操作。但需要注意的是，matchAll() 函数只能在 Chrome 73+、FireFox 67+、Safari 13+、Node.js 12.0.0+ 等支持 ES11 标准的环境下使用。
希望本文能够帮助大家更好地理解 matchAll() 函数的使用方法及其应用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664aa920d3423812e49953a6