ES10 中'string matchAll()' 包含的变革-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，新加入了一个方法 matchAll()，它是字符串原型对象的成员方法，可用于字符串匹配。相较于 ES6 中的 match 方法，matchAll 能够匹配出所有符合正则表达式的结果，并且还能够查看匹配结果的详情，具有更广泛的使用价值。

1. matchAll() 的基本使用

使用 matchAll() 方法需要传入一个参数，即正则表达式，返回的结果是一个迭代器对象 Iterator，这个对象包含了所有匹配结果和相关的信息。以下是基本的使用示例：

-- -------------------- ---- -------
--- --- - -- ---- -------------
--- ------ - ------------- -- -----
--- ------- - --------------------- -- -- ---------- ----

--- ---- ------ -- -------- - -- ---------------
    ----------------------- -- -------
    -------------------------- -- ----------------
    -------------------------- -- ----
-

输出的结果如下：

-- -------------------- ---- -------
-
-
- ---- -----------
----
-
- ---- -----------
----------
-
- ---- -----------

2. matchAll() 的高级使用

2.1 使用 groups 属性

在 ES10 中，当正则表达式包含分组时，matchAll 方法会返回一个数组对象，该数组的每个元素都是一个包含了匹配信息和组信息的数组。在组信息中，将正则表达式每个 "(" 和 ")" 中的内容作为一个单独的组，并且可以通过访问数组的 groups 属性来获得组信息。

let str = "Hello, world! Nice to meet you, ES!";
let regExp = /(?<greeting>\w+), (?<subject>\w+)!/;
let results = str.matchAll(regExp);

for (let result of results) {
    console.log(result.groups); // 返回该匹配结果的所有分组
}

输出的结果如下：

{ greeting: 'Hello', subject: 'world' }
{ greeting: 'Nice', subject: 'to' }

2.2 使用 [...iterator] 扩展操作符

在 ES10 中，还可以使用扩展操作符 ... 将迭代器转换为数组，来访问匹配结果的数组。该数组就是 matchAll 方法返回的数组，每个元素是一个包含匹配和组信息的数组。

let str = "I love JavaScript!";
let regExp = /[a-zA-Z]+/g;
let results = str.matchAll(regExp);

let arr = [...results]; // 将迭代器转换为数组
console.log(arr[0]); // ["I", index: 0, input: "I love JavaScript!"]

2.3 使用 lookbehind 正向断言

在 ES10 中，还新增了 lookbehind 正向断言，可以用 (?<=pattern) 的形式来表示，其中 pattern 是一个子正则表达式。正向断言不会匹配子表达式，只匹配断言后面的内容，符合 lookbehind 正向断言的要求才会匹配成功。

let str = "Hello, world! Nice to meet you, ES!";
let regExp = /(?<=(\w+), )\w+/g;
let results = str.matchAll(regExp);

let arr = [...results];
console.log(arr[0][0]); // "world"

通过 lookbehind 正向断言，可以只匹配符合某种条件的字符串。

3. 总结

ES10 中新增加的字符串方法 matchAll() 能够返回所有匹配的内容，并且提供了更多的组信息、位置信息和断言方式，可以更好地辅助正则表达式的使用。同时，借助 ES10 中的扩展操作符和 lookbehind 正向断言，更加灵活方便地应对各种匹配需求，可以帮助前端开发者更加高效地处理字符串。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/645c6023968c7c53b0eb911a