随着 JavaScript 语言的发展，正则表达式 (Regular Expression) 已经成为前端开发中必不可少的工具之一。在 ECMAScript 2018 (ES9) 中，正则表达式得到了新的升级，其中最重要的特性之一是 “正则表达式具名捕获组”。这项新特性提供了一种更好的方式来捕获匹配项中的数据，使正则表达式的使用更加灵活和易读。
具名捕获组的概念
在介绍具名捕获组之前，我们先来了解一下基本的正则表达式捕获组。正则表达式捕获组是用括号表示的一个子表达式，可以捕获并存储匹配内容。例如，正则表达式 (foo)(bar) 匹配 "foobar" 这个字符串，其中 $1 = "foo"，$2 = "bar"。
而具名捕获组则是在捕获组的基础上增加了名称，例如正则表达式 (?<foo>foo)(?<bar>bar) 可以捕获 "foobar" 这个字符串，并将其分别命名为 foo 和 bar。
具名捕获组的语法
在具名捕获组中，要在括号内用 ?<name> 的形式来定义名称，例如：
/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/这个正则表达式将匹配一个 YYYY-MM-DD 格式的字符串，并将其拆分为名为 year、month、day 的三个组件。
具名捕获组的使用
具名捕获组的使用非常简单，和普通捕获组的用法类似：
const match = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec('2021-01-01');
console.log(match.groups.year); // '2021'
console.log(match.groups.month); // '01'
console.log(match.groups.day); // '01'具名捕获组还支持传统的索引方式访问：
const match = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec('2021-01-01');
console.log(match[1]); // 等价于 match.groups.year
console.log(match[2]); // 等价于 match.groups.month
console.log(match[3]); // 等价于 match.groups.day具名捕获组的优势
使用具名捕获组的最大优势是可以更加清晰地指定捕获内容的含义，降低代码的可读性和易用性。例如，下面两个正则表达式都可以匹配类似 "firstName lastName" 的字符串：
/(\w+)\s(\w+)/ // 传统捕获组方式 /(?<firstName>\w+)\s(?<lastName>\w+)/ // 具名捕获组方式
但是使用具名捕获组时，代码更加清晰易懂：
const name = /(?<firstName>\w+)\s(?<lastName>\w+)/.exec('John Smith').groups;
console.log(name.firstName); // 'John'
console.log(name.lastName); // 'Smith'总结
正则表达式具名捕获组是 ECMAScript 2018 (ES9) 中的一项重要升级，它为开发者提供了更加清晰和直观的方式来处理正则表达式的匹配和捕获。在实际开发中，可以好好利用这个新特性，提高代码的可读性和维护性，从而更好地优化和改进前端项目的开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528b4b07d4982a6ebb3f17b