ES9 中字符串的 matchAll() 方法及其应用

ES9 中字符串的 matchAll() 方法及其应用

ES9（ECMAScript 2018）是 JavaScript 的最新标准，其中新增了一些有用的功能，如 Promise finally() 方法、正则表达式命名捕获组等。本文将介绍 ES9 中新增的字符串方法 matchAll() 及其应用。

matchAll() 方法

matchAll() 方法返回一个迭代器对象，它包含了字符串中所有匹配正则表达式的结果。该方法只接受正则表达式作为参数，不支持字符串。

语法：

str.matchAll(regexp)

其中，str 为要进行匹配的字符串，regexp 为正则表达式。

matchAll() 方法返回的迭代器对象包含多个结构相同的匹配对象，每个对象都有以下属性：

• 0： 匹配到的完整字符串。
• 1： 第一个捕获组的匹配值。
• 2： 第二个捕获组的匹配值。
• index： 匹配到的字符串在原字符串中的索引。
• input： 原字符串。

使用方法：

const str = "abc123def456ghi789";
const regExp = /[a-z]+(\d+)/g;

const result = str.matchAll(regExp);

for (const match of result) {
  console.log(match[1], match.index);
}

输出结果为：

"123" 3
"456" 9
"789" 15

示例代码中，首先定义字符串 str 和正则表达式 regExp，接着使用 matchAll() 方法对 str 进行匹配，将匹配结果存储在 result 中，并遍历 result 中的每一个匹配对象，输出捕获组 1 的值和匹配的起始位置。

matchAll() 方法的应用

matchAll() 方法可以方便地对复杂的字符串进行处理，例如从 Markdown 格式文本中提取全部图片URL地址。

示例代码：

const markdown = `
# JavaScript进阶
Blackandyellow 精心创作，更多前端文章欢迎关注哦

#
ES9（ECMAScript 2018）是 JavaScript 的最新标准，其中新增了一些有用的功能，如 Promise finally() 方法、正则表达式命名捕获组等。本文将介绍 ES9 中新增的字符串方法 matchAll() 及其应用。

![图片1](https://example.com/img1.jpg)

![图片2](https://example.com/img2.jpg)

![图片3](https://example.com/img3.jpg)

`;

const imageRegEx = /!\[[^\]]*\]\((.*?)\)/g;

const imageUrls = [];

for (const match of markdown.matchAll(imageRegEx)) {
  imageUrls.push(match[1]);
}

console.log(imageUrls);

输出结果为：

["https://example.com/img1.jpg", "https://example.com/img2.jpg", "https://example.com/img3.jpg"]

示例代码中，首先定义了一个 Markdown 文本字符串 markdown，接着使用正则表达式 imageRegEx 捕获其中的所有图片URL地址。然后，使用 matchAll() 方法对 markdown 进行匹配，并将匹配的所有图片 URL 地址存储在数组 imageUrls 中。最后，输出数组 imageUrls。

总结

本文介绍了 ES9 中字符串方法 matchAll() 及其应用。matchAll() 方法可以方便地对复杂的字符串进行处理，值得前端开发者们在代码中使用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658fc3b4eb4cecbf2d558428