正则表达式（Regular Expression）是前端开发中常用的工具之一，用于匹配和操作字符串。然而，正则表达式也常常会遇到一些问题，比如难以理解和维护、不够灵活等。ES9（ECMAScript 2018）引入了命名捕获（Named Capture Groups）的特性，可以更加方便地解决这些问题。
命名捕获
在之前的正则表达式中，我们通常使用"()"来捕获匹配的子字符串，例如：
const re = /(\d{4})-(\d{2})-(\d{2})/;
const match = re.exec('2019-01-01');
console.log(match[1]); // 2019
console.log(match[2]); // 01
console.log(match[3]); // 01这样做虽然能够捕获到我们需要的子字符串，但是代码可读性不够好，而且需要通过数字索引来访问捕获到的子字符串。命名捕获则提供了更好的解决方案。
命名捕获使用"()"和"?<"开始，后面跟着捕获的名称，例如：
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2019-01-01');
console.log(match.groups.year); // 2019
console.log(match.groups.month); // 01
console.log(match.groups.day); // 01这样做可以直接通过名称来访问捕获到的子字符串，代码可读性更高。
命名捕获实践
命名捕获不仅提高了代码可读性，还可以解决一些正则表达式难以理解和维护的问题。下面我们以一个实际的例子来说明。
假设我们有一个字符串数组，每个字符串都是一个人的姓名和年龄，例如：
const names = ['张三,18', '李四,20', '王五,22'];
我们需要将这个数组转换成一个对象数组，每个对象包含姓名和年龄两个属性。使用之前的正则表达式，我们可以这样做：
// javascriptcn.com 代码示例
const re = /(\w+),(\d+)/;
const result = names.map(name => {
const match = re.exec(name);
return {
name: match[1],
age: match[2]
};
});
console.log(result);
// [{name: '张三', age: '18'}, {name: '李四', age: '20'}, {name: '王五', age: '22'}]这样做虽然能够达到我们的目的，但是代码可读性不够好，而且正则表达式难以理解和维护。我们可以使用命名捕获来改进这个例子：
// javascriptcn.com 代码示例
const re = /(?<name>\w+),(?<age>\d+)/;
const result = names.map(name => {
const match = re.exec(name);
return {
name: match.groups.name,
age: match.groups.age
};
});
console.log(result);
// [{name: '张三', age: '18'}, {name: '李四', age: '20'}, {name: '王五', age: '22'}]这样做代码可读性更高，而且正则表达式也更加容易理解和维护。
总结
命名捕获是 ES9 引入的一个非常实用的特性，可以提高正则表达式的可读性和维护性。在实际开发中，我们可以根据具体情况使用命名捕获来改善代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552cc88d2f5e1655dc7c733