ECMAScript 2018：JavaScript 中的 RegExp named capture groups 解决方案
在 JavaScript 中，正则表达式是非常常见的一种操作字符串的方式。在 ECMAScript 2018 中，引入了一种新的正则表达式特性，即 RegExp named capture groups（命名捕获组）。这个特性可以让我们更加方便地从匹配的字符串中提取我们需要的信息，避免了一些不必要的代码。
在介绍 named capture groups 之前，我们先来看一下之前的做法。在 JavaScript 中，我们可以使用正则表达式来匹配一个字符串，然后使用 exec 方法来获取匹配结果。例如，我们要从一个字符串中提取出其中的电话号码：
const str = '我的电话号码是：010-12345678，你可以打电话给我。';
const pattern = /(\d{3})-(\d{8})/;
const result = pattern.exec(str);
console.log(result[1]); // 010
console.log(result[2]); // 12345678在上面的例子中，我们使用了一个正则表达式来匹配电话号码，并使用了两个捕获组来分别提取区号和电话号码。然后我们可以通过访问 result 数组的第一个和第二个元素来获取这两个值。这种方法虽然可行，但是当我们需要提取的信息比较多时，代码会变得非常冗长，而且很难维护。
正是为了解决这个问题，ECMAScript 2018 引入了 named capture groups。使用 named capture groups，我们可以给每个捕获组指定一个名字，然后通过访问 result 对象的属性来获取这些值。例如，我们可以使用下面的代码来提取电话号码：
const str = '我的电话号码是：010-12345678，你可以打电话给我。';
const pattern = /(?<areaCode>\d{3})-(?<phoneNumber>\d{8})/;
const result = pattern.exec(str);
console.log(result.groups.areaCode); // 010
console.log(result.groups.phoneNumber); // 12345678在上面的例子中，我们使用了 named capture groups 来给每个捕获组指定了一个名字。其中 (?<areaCode>\d{3}) 指定了一个名为 areaCode 的捕获组，它匹配了三个数字；(?<phoneNumber>\d{8}) 指定了一个名为 phoneNumber 的捕获组，它匹配了八个数字。然后我们可以通过访问 result.groups 对象的属性来获取这两个值。这种方式不仅代码更加简洁，而且也更加易于维护。
除了上面提到的使用 (?<name>pattern) 来指定一个 named capture group 外，我们还可以使用 (?<name>) 来指定一个空的 named capture group，这样我们就可以在后面的代码中使用这个名字来引用这个捕获组。例如，下面的代码可以匹配一个 HTML 标签，并提取其中的标签名和属性：
const str = '<a href="https://www.google.com/">Google</a>'; const pattern = /<(?<tagName>\w+)(?<attributes>(?:\s+\w+="[^"]*")*)>/; const result = pattern.exec(str); console.log(result.groups.tagName); // a console.log(result.groups.attributes); // href="https://www.google.com/"
在上面的例子中，我们使用了 (?<tagName>\w+) 来指定一个名为 tagName 的 named capture group，它匹配了一个或多个字母数字字符；(?<attributes>(?:\s+\w+="[^"]*")*) 指定了一个名为 attributes 的 named capture group，它匹配了零个或多个属性。注意，这里我们使用了一个非捕获组 (?:) 来匹配属性，这样我们就不会把这些属性作为捕获组的一部分。然后我们可以通过访问 result.groups 对象的属性来获取标签名和属性。
总结一下，ECMAScript 2018 中引入了 named capture groups 这个正则表达式特性，它可以让我们更加方便地从匹配的字符串中提取我们需要的信息。通过给每个捕获组指定一个名字，我们可以避免使用数组来访问匹配结果，从而让代码变得更加简洁易读。如果你在编写 JavaScript 正则表达式时需要提取一些信息，不妨试试 named capture groups 这个新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d1b513add4f0e0ffa54dab