随着 JavaScript 的发展，语言和标准库不断增长，ES12 中引入了 match 组和 named capture groups 语法。这两种语法能够帮助开发者更加方便地处理字符串和正则表达式，并且提供了新的功能。在本文中，我们将深入探讨这两种语法，并通过示例代码来学习它们的使用方法。
match 组
match 组是一个新的语法，可用于匹配字符串中的特定部分。在 ES6 中，我们可以使用正则表达式中的捕获组来实现这一点。例如，在下面的示例中，我们使用捕获组来获取字符串中的数字：
const str = 'John 12345'; const pattern = /(\d+)/; const result = str.match(pattern); console.log(result[1]); // 12345
ES12 中提供的 match 组让我们不再需要使用捕获组来获取这样的信息。match 组定义了一组括号，括号内的正则表达式会被匹配和解析，然后将匹配结果存储到一个名为 $<name> 的组中。例如：
const str = 'John 12345'; const pattern = /(?<num>\d+)/; const result = str.match(pattern); console.log(result.groups.num); // 12345
在上面的示例中，我们使用 match 组语法来匹配字符串 str 中的数字，并将它们存储在名为 num 的组中。与捕获组不同，使用 match 组可以更好地组织匹配结果，并且可以使代码更加易于阅读和维护。
named capture groups
named capture groups 与 match 组十分相似，但提供了更加灵活的语法，允许我们在正则表达式中定义具有命名的捕获组。与 match 组不同，named capture groups 需要使用语法 (?<name>pattern) 来创建，其中，name 是新创建的捕获组名称，pattern 是需要匹配的正则表达式。例如：
const str = "Hello, 2021!"; const pattern = /(?<year>\d+)/; const result = str.match(pattern); console.log(result.groups.year); // 2021
在上面的示例中，我们匹配了字符串 str 中的数字，并将其存储在名为 year 的捕获组中。使用 named capture groups 语法可以使代码更加易于理解和维护。此外，它还允许我们使用捕获组来实现更加复杂的模式匹配操作。
示例代码
为了更好地理解 match 组和 named capture groups 的使用方法，让我们看一下下面的代码示例，其可以从一个 JSON 字符串中提取个人信息：
-- -------------------- ---- ------- ----- ---- - -- ------- ------- ------ --- -------- ------------------ --- ----- ------- - ----------------------------------------- ----- ------ - --- --- ------ ----- ------- - ------------------- --- ----- - ------------------------ - -------------------------------- ---- - -------------------- -- - ----- ------- ---- --- ------ -------------------
在上面的示例中，我们使用 named capture groups 语法提取 JSON 字符串中的个人信息。我们定义了一个正则表达式，该正则表达式匹配键值对，其中 key 值存储在名为 key 的捕获组中，而 value 值存储在名为 value 的捕获组中。我们在 while 循环中使用 exec() 方法来遍历正则表达式匹配的所有结果，并将 key 值和 value 值存储到 result 对象中。在存储 value 时，我们使用 replace() 方法去掉 value 值中的引号，以便将它作为数字存储在对象中。
总结
在本文中，我们深入探讨了 ES12 中的 match 组和 named capture groups 语法，并提供了相关的示例代码。这些新语法为字符串和正则表达式的操作提供了更大的灵活性，可以使代码更加易于阅读和维护。为了最大化利用这些语法，我们需要深入理解它们的工作原理，并使用示例代码来加深我们的学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e19393f6b2d6eab3cc0f1d