ES12 中新增的 String.prototype.matchAll() 方法详解及其使用案例

随着前端技术的不断发展，JavaScript 也在不断地升级。最新的 ECMAScript 标准已经升级到了 ES2022，其中最重要的更新之一就是新增了 String.prototype.matchAll() 方法。这个新方法可以帮助我们更方便地处理字符串匹配和搜索。

String.prototype.matchAll() 的作用和用法

String.prototype.matchAll() 方法用于在字符串中查找全部匹配的正则表达式，并返回一个迭代器。这个迭代器可以用于逐个访问字符串中的所有匹配项，以及每个匹配项的详细信息。

这里简单介绍一下 String.prototype.matchAll() 的基本用法。我们可以通过下面的示例代码来说明：

const str = "hello, world!";
const regex = /l/g;
const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match);
}

上面的代码会输出以下结果。

// {0: "l", index: 2, input: "hello, world!", groups: undefined}
// {0: "l", index: 3, input: "hello, world!", groups: undefined}

这里我们定义了一个字符串 str 和一个正则表达式 regex，并用 str.matchAll() 方法来查找字符串中全部匹配正则表达式的结果。由于正则表达式 regex 中使用了 /g 标记，因此它会在字符串 str 中查找所有匹配项。

最后，我们通过 for...of 循环遍历每一个匹配项，并将它们的详细信息输出到控制台中。可以注意到，输出结果中包含了每个匹配项的索引，对应的输入字符串，以及正则表达式是否使用了分组。

String.prototype.matchAll() 的详细使用方法

除了基本用法之外，String.prototype.matchAll() 还有很多其他用法和技巧。下面我们来逐一介绍一些常见的应用场景。

1. 获取正则表达式中的分组信息

在正则表达式中，我们可以使用括号 () 来定义分组。这个特性在处理字符串时非常有用，可以在匹配时快速地提取出和分组相关的数据。下面的示例代码演示了如何使用 String.prototype.matchAll() 方法来获取正则表达式中的分组信息。

const str = "2022-01-01";
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(`Year: ${match[1]}, Month: ${match[2]}, Day: ${match[3]}`);
}

上述代码会输出以下结果。

// Year: 2022, Month: 01, Day: 01

这里，我们定义了一个日期字符串 str，并使用正则表达式 regex 匹配其中的年、月、日信息。通过 matchAll() 方法，我们可以获取所有匹配项的详细信息。每个匹配项的详细信息中，可以使用数组索引访问到每个分组的内容。

2. 处理 Unicode 字符串

在 JavaScript 中，字符串和 Unicode 是紧密相关的。为了处理 Unicode 字符串，我们可以使用正则表达式中的 Unicode 属性和值。下面的示例代码演示了如何在 Unicode 中使用 String.prototype.matchAll() 方法。

const str = "🍎🍊🍇";
const regex = /\p{Emoji}/gu;
const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match);
}

上述代码中，我们定义了一个包含 Emoji 的字符串 str，然后使用正则表达式 \p{Emoji} 匹配其中的 Emoji 字符集合。由于 Emoji 是多字符的，因此我们需要在正则表达式中使用 /u 标记来开启 Unicode 支持。

最终，我们可以通过 matchAll() 方法获取到所有的匹配项，然后遍历输出它们的详细信息。

3. 应用于 URL 参数的解析

当我们访问网页时，经常需要解析 URL 参数。这时，我们可以使用 String.prototype.matchAll() 方法来迅速处理 URL 字符串，并提取出对应的参数值。下面是一个简单的示例代码，演示如何解析 URL 字符串中的参数。

const searchParams = new URLSearchParams(window.location.search);
const regex = /(\w+)=([\w-]+)/g;
const matches = searchParams.toString().matchAll(regex);

for (const match of matches) {
  console.log(`Key: ${match[1]}, Value: ${match[2]}`);
}

上述代码中，我们首先使用 URLSearchParams 对象来获取当前页面 URL 中的搜索参数。然后，我们定义了一个正则表达式 regex，用于解析 URL 参数中的键值对。最后，我们使用 matchAll() 方法遍历正则表达式在 URL 参数中的所有匹配项，并输出它们的键和值。

结语

String.prototype.matchAll() 方法是一个非常有用的字符串处理工具，可以帮助我们更方便地处理字符串中的正则表达式匹配和搜索。如果你经常需要处理字符串或正则表达式，那么不妨尝试一下这个新的方法，相信它会给你带来不少便利。

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