正则表达式（Regular Expressions）是一种经常用于匹配文本的强大工具。它可以在字符串中匹配特定的模式，是在 web 开发中非常有用的工具之一。ES8 中引入了 Named Capture Groups，让我们在编写正则表达式时具有更好的可读性和可维护性。
不使用 Named Capture Groups
如果你以前使用过正则表达式，你可能会使用类似于下面的语法来专门匹配电话号码：
const regex = /\(([0-9]{3})\) ([0-9]{3})-([0-9]{4})/;
const str = '(123) 456-7890';
const matches = regex.exec(str);在这个示例中，我们使用了 exec() 方法来找出 str 中的电话号码。然而，通过 matches 对象来访问特定的匹配项并不是非常直观。下面是代码如何能够解析有效电话号码及其组件的示例：
const areaCode = matches[1]; const firstPart = matches[2]; const secondPart = matches[3];
这是符合语法要求的，但是使用过程中出错的可能性很大。如果我们的正则表达式要匹配的元素比这个例子更复杂，那么这种方法会变得越来越混乱。
使用 Named Capture Groups
那么，Named Capture Groups 可以为我们提供什么样的帮助呢？让我们通过上面的例子看看它们可以如何应用来使代码更清晰：
const regex = /\((?<areaCode>[0-9]{3})\) (?<firstPart>[0-9]{3})-(?<secondPart>[0-9]{4})/;
const str = '(123) 456-7890';
const matches = regex.exec(str);现在，我们的正则表达式使用了所谓的“命名捕获组”语法。这个语法使我们可以给匹配组提供简洁的名称，而不是仅仅用数字来标识匹配组。现在，我们可以使用这些命名，而不是像上面那样通过数字来访问组件：
const areaCode = matches.groups.areaCode; const firstPart = matches.groups.firstPart; const secondPart = matches.groups.secondPart;
这种方法提高了代码的可读性，避免了出现基于对象序号的错误，更直接地传达我们属于哪个数据匹配组。
使用实际示例
在我们的示例中，正则表达式的形式不太容易比较编写和使用 Named Capture Groups 起到的优势，因为匹配的内容非常少。在更复杂的匹配情况下，命名组的格式化可以做到更好的理解和可维护性。
以下是示例 Regex，它可以匹配有效的电子邮件地址，并按名称捕获组进行分组：
const emailRegex = /(?<username>[^@]+)@(?<domain>[^\.]+)\.(?<suffix>.{2,6})/;
const email = 'my.email@gmail.com';
const matches = emailRegex.exec(email);
console.log(matches.groups.username); // 'my.email'
console.log(matches.groups.domain); // 'gmail'
console.log(matches.groups.suffix); // 'com'在这个例子中，命名组通过给捕获表达式命名为明确和短小的组件名称使得 email 地址相对易于阅读和调试。
总结
使用 Named Capture Groups 帮助我们在正则表达式的编写和使用中提高可读性和可维护性。它们是 ES8 中一个重要的新增特性，能够清晰而直观地表示我们的正则表达式。在实际开发中，我们可以使用这种新的语法来减少我们的错误、加快开发速度，甚至作为重构现有代码的一种工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645466ba968c7c53b084f78f