ES2020 中的 matchAll 方法详解

ES2020 是 ECMAScript 标准的最新版本，其中包含了 matchAll 方法，在一定程度上可以使开发者更容易地进行正则表达式匹配。本文将详细阐述这一方法的使用和特性，以便读者更好地应用于前端开发中。

matchAll 方法的基本概念

matchAll 方法是 String 对象的一个新方法，该方法用于匹配字符串中所有与正则表达式匹配的子串。它的返回值是一个迭代器，通过迭代器可以得到每个匹配的结果。matchAll 方法是以类似 indexOf 方法的方式进行匹配。

matchAll 方法的基本使用

在使用 matchAll 方法之前，需要先创建一个正则表达式。例如，要匹配所有字母“a”出现的位置，可以创建正则表达式 /\ba\b/g。请注意，在正则表达式中，不仅要使用双斜杠将其括起来，还要加上“g”修饰符，表示全局搜索，否则 matchAll 方法只会匹配到字符串中的第一个符合条件的位置。

然后，可以通过调用 String 对象的 matchAll 方法来执行匹配操作，如下所示：

const str = 'a b a c a';
const regExp = /\ba\b/g;
const matches = str.matchAll(regExp);

在这个示例中，matches 是一个迭代器，它包含了输入字符串中所有匹配到的“a”字母的位置。我们可以通过循环和解构，取出每一个匹配位置的详细信息，例如匹配的字符串、索引、以及匹配项的分组。可以使用以下代码来取出这些信息：

for (const match of matches) {
  const { 0: matchString, index, groups } = match;
  console.log(matchString, index, groups);
}

示例代码

const str = 'a b a c a';
const regExp = /\ba\b/g;
const matches = str.matchAll(regExp);

for (const match of matches) {
  const { 0: matchString, index, groups } = match;
  console.log(matchString, index, groups);
}

输出结果：

a 0 undefined
a 4 undefined
a 8 undefined

使用 matchAll 方法进行高级匹配

除了基本的正则表达式匹配，matchAll 方法还提供了一些高级匹配功能。其中最显著的特征是支持分组和捕获，即在正则表达式中使用圆括号和命名捕获。这是一个非常强大的功能，可以使开发人员轻松地分析输入字符串，并提取所需的信息。

例如，要从输入字符串中提取所有的电话号码，可以使用以下正则表达式：

const phoneNumberRegExp = /(?<areaCode>\d{3})-(?<prefix>\d{3})-(?<lineNumber>\d{4})/g;

这个正则表达式使用了命名捕获，即通过使用 ?<name> 来为分组命名。在正则表达式被用于 matchAll 方法时，其会返回一个迭代器，每次迭代将提取一个匹配结果对象。每个匹配结果对象都有一个名为 groups 的属性，其中存放了正则表达式中每个命名分组的捕获结果。例如，以下代码将使用命名捕获提取电话号码：

const str = 'John: 555-123-4567, Jane: 555-987-6543';
const phoneNumberRegExp = /(?<areaCode>\d{3})-(?<prefix>\d{3})-(?<lineNumber>\d{4})/g;
const matches = str.matchAll(phoneNumberRegExp);

for (const match of matches) {
  const { groups: { areaCode, prefix, lineNumber } } = match;
  console.log(`${areaCode}-${prefix}-${lineNumber}`);
}

示例代码

const str = 'John: 555-123-4567, Jane: 555-987-6543';
const phoneNumberRegExp = /(?<areaCode>\d{3})-(?<prefix>\d{3})-(?<lineNumber>\d{4})/g;
const matches = str.matchAll(phoneNumberRegExp);

for (const match of matches) {
  const { groups: { areaCode, prefix, lineNumber } } = match;
  console.log(`${areaCode}-${prefix}-${lineNumber}`);
}

输出结果：

555-123-4567
555-987-6543

指导意义

matchAll 方法的引入使得前端开发人员可以更容易地进行正则表达式匹配，而且还支持高级匹配功能。这种技术的应用范围非常广泛，从表单验证到输入过滤再到数据处理等等，都有可能用到类似的技术。

开发人员可以通过学习这种技术，提升自己的开发技能，让自己在前端开发的工作中更加得心应手，提高工作效率，减轻开发压力。

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