在 ES9 中，正则表达式得到了新的功能：命名捕获组。这一功能可以使我们更轻松地从匹配结果中提取出变量，并且可以更加可读和易于维护。
什么是命名捕获组？
正则表达式中，捕获组是一种被圆括号包括的子字符串，在匹配时被标识为一个子表达式。捕获组可以在匹配结果中找到，且可以通过索引或调用 group() 函数访问。
命名捕获组是一种特殊的捕获组，其可以通过名字而不是索引来访问，并且在匹配结果中也以命名的形式呈现。
如何使用命名捕获组？
使用命名捕获组，只需要在圆括号中使用 (?<name> 来声明一个捕获组，并使用 ) 来结束。其中 name 是你给捕获组起的名字。
以下是一个例子，我们使用命名捕获组来匹配一个格式为 yyyy-mm-dd 的日期，并从中提取出年、月、日三个变量：
let dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
let matchResult = dateRegex.exec('2022-07-22');
console.log(matchResult.groups.year); // 2022
console.log(matchResult.groups.month); // 07
console.log(matchResult.groups.day); // 22在上面的例子中，我们可以使用 groups 属性来访问命名捕获组，然后通过名字来获取变量的值。
命名捕获组的优势
使用命名捕获组的一个主要优势是代码可读性和可维护性都更好。通过使用命名的捕获组，我们可以更清楚地理解正则表达式的意图，并且更容易地修改和更新代码。
另一个优势是我们可以使用命名捕获组来更方便地重复使用相同的正则表达式。通过给不同的捕获组命名，我们可以轻松地从不同的匹配结果中提取出相同的变量，这可以简化我们的代码。
总结
在 ES9 中，命名捕获组是一个非常有用的功能，它可以帮助我们更轻松地从正则表达式匹配结果中提取出变量，并且可以使我们的代码更加可读和易于维护。除了上文提到的优势，命名捕获组还可以在更复杂的正则表达式中使用，如嵌套捕获组和重复嵌套。我们应该掌握使用命名捕获组的方法，以便在日常的前端开发中更加高效地编写正则表达式。
示例代码
// 匹配 HTML 标签，并从中提取出标签名和属性
let htmlRegex = /\<(?<tag>\w+)[^>]*?(?<attrList>\w+="(?:.|\\n)*?")*\>/g;
let html = '<div class="my-class" id="my-id">This is div.</div><br><img src="//sample.com/img.png">';
let matchResult = html.matchAll(htmlRegex);
for (let match of matchResult) {
console.log(match.groups.tag); // div, br, img
console.log(match.groups.attrList); // class="my-class" id="my-id", undefined, src="//sample.com/img.png"
}来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e0dbd7d4982a6eb7a2c32