在 ES9 中，JavaScript 新增了正则表达式命名捕获组的功能，它可以使得正则表达式的匹配更加灵活和方便。本文将详细介绍 ES9 中新增的正则表达式命名捕获组的使用方法，并提供示例代码以供学习和参考。
什么是正则表达式命名捕获组？
正则表达式命名捕获组是一种新的正则表达式特性，它允许我们在正则表达式中给捕获组命名，并通过命名来引用捕获的内容。命名捕获组的语法如下：
(?<name>pattern)
其中，name 是捕获组的名称，pattern 是捕获组的正则表达式模式。
如何使用正则表达式命名捕获组？
在使用正则表达式命名捕获组时，我们可以通过以下方式引用捕获的内容：
- 通过
groups属性访问所有命名捕获组的内容； - 通过解构赋值来分别访问每个命名捕获组的内容；
- 通过
matchAll方法返回的迭代器来访问每个命名捕获组的内容。
下面我们将分别介绍这三种方式的使用方法。
通过 groups 属性访问所有命名捕获组的内容
当我们使用正则表达式匹配字符串时，可以通过 groups 属性访问所有命名捕获组的内容。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = regex.exec('2022-07-01');
console.log(match.groups.year); // '2022'
console.log(match.groups.month); // '07'
console.log(match.groups.day); // '01'在这个例子中，我们使用正则表达式 /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ 匹配字符串 '2022-07-01'，其中 (?<year>\d{4})、(?<month>\d{2}) 和 (?<day>\d{2}) 都是命名捕获组。通过 exec 方法返回的匹配对象 match，我们可以通过 groups 属性访问所有命名捕获组的内容。
通过解构赋值来分别访问每个命名捕获组的内容
除了通过 groups 属性访问所有命名捕获组的内容外，我们还可以通过解构赋值来分别访问每个命名捕获组的内容。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const { year, month, day } = regex.exec('2022-07-01').groups;
console.log(year); // '2022'
console.log(month); // '07'
console.log(day); // '01'在这个例子中，我们使用解构赋值来分别访问每个命名捕获组的内容。通过 regex.exec('2022-07-01').groups 获取所有命名捕获组的内容，并通过解构赋值将其分别赋值给变量 year、month 和 day。
通过 matchAll 方法返回的迭代器来访问每个命名捕获组的内容
除了通过 exec 方法返回的匹配对象和解构赋值来访问命名捕获组的内容外，我们还可以通过 matchAll 方法返回的迭代器来访问每个命名捕获组的内容。例如：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;
const matches = '2022-07-01\n2022-07-02\n2022-07-03'.matchAll(regex);
for (const match of matches) {
console.log(match.groups.year); // '2022'
console.log(match.groups.month); // '07'
console.log(match.groups.day); // '01', '02', '03'
}在这个例子中，我们使用正则表达式 /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g 匹配多行字符串 '2022-07-01\n2022-07-02\n2022-07-03'，其中 (?<year>\d{4})、(?<month>\d{2}) 和 (?<day>\d{2}) 都是命名捕获组。通过 '2022-07-01\n2022-07-02\n2022-07-03'.matchAll(regex) 获取所有匹配结果的迭代器 matches，并通过 for...of 循环遍历每个匹配结果，并通过 match.groups 访问每个命名捕获组的内容。
总结
ES9 中新增的正则表达式命名捕获组是一种非常实用的正则表达式特性，它可以使得正则表达式的匹配更加灵活和方便。本文介绍了正则表达式命名捕获组的语法和使用方法，并提供了示例代码以供学习和参考。希望本文能够对前端开发者在使用正则表达式时提供一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c0a540add4f0e0ffaa6963