简介
在 ES2020 中，JavaScript 引入了可选的标识捕获组。这是一种新的正则表达式语法，它允许我们在正则表达式中使用可选的捕获组。这个新特性的引入使得我们可以更加方便地处理多种匹配场景，从而更好地满足我们的需求。
在本文中，我们将介绍可选的标识捕获组的语法和使用方法，并提供一些示例代码，帮助读者更好地理解和应用这个新特性。
可选的标识捕获组的语法
可选的标识捕获组的语法非常简单。它使用问号和冒号来表示一个可选的捕获组。下面是一个示例：
const regex = /(\d+)(?:px)?/;
在上面的正则表达式中，我们使用了一个可选的捕获组 (?:px)?。这个捕获组表示匹配一个可选的 px 字符串。如果匹配到了 px，那么这个捕获组会被忽略，否则它会被视为一个空字符串。
可选的标识捕获组的使用方法
可选的标识捕获组可以用于多种匹配场景。下面我们来介绍几个常见的例子。
匹配可选的字符串
有时候我们需要匹配一个可选的字符串。比如，我们可能需要匹配一个数字后面可能跟着的一个单位字符串，比如 px 或 em。这时候我们可以使用可选的标识捕获组来实现：
const regex = /(\d+)(?:px|em)?/;
在上面的正则表达式中，我们使用了一个可选的捕获组 (?:px|em)?。这个捕获组表示匹配一个可选的 px 或 em 字符串。如果匹配到了 px 或 em，那么这个捕获组会被忽略，否则它会被视为一个空字符串。
匹配可选的分隔符
有时候我们需要匹配一个可选的分隔符。比如，我们可能需要匹配一个由逗号分隔的数字列表，但是最后一个数字后面可能没有逗号。这时候我们可以使用可选的标识捕获组来实现：
const regex = /(\d+)(?:,|$)/;
在上面的正则表达式中，我们使用了一个可选的捕获组 (?:,|$)。这个捕获组表示匹配一个可选的逗号或字符串结尾。如果匹配到了逗号，那么这个捕获组会被忽略，否则它会被视为一个字符串结尾。
匹配可选的子模式
有时候我们需要匹配一个可选的子模式。比如，我们可能需要匹配一个由括号包围的字符串，但是括号可能不存在。这时候我们可以使用可选的标识捕获组来实现：
const regex = /(\w+)(?:\((\d+)\))?/;
在上面的正则表达式中，我们使用了一个可选的捕获组 (?:\((\d+)\))?。这个捕获组表示匹配一个可选的括号和一个数字。如果匹配到了括号和数字，那么这个捕获组会将括号和数字一起捕获，否则它会被视为一个空字符串。
示例代码
下面是一些示例代码，演示了如何使用可选的标识捕获组。
匹配可选的字符串
const regex = /(\d+)(?:px|em)?/;
console.log(regex.exec("10px")); // ["10px", "10"]
console.log(regex.exec("20em")); // ["20em", "20"]
console.log(regex.exec("30")); // ["30", "30"]匹配可选的分隔符
const regex = /(\d+)(?:,|$)/;
console.log(regex.exec("1,2,3,")); // ["1,", "1"]
console.log(regex.exec("4,5,6")); // ["4,", "4"]
console.log(regex.exec("7")); // ["7", "7"]匹配可选的子模式
const regex = /(\w+)(?:\((\d+)\))?/;
console.log(regex.exec("hello(123)")); // ["hello(123)", "hello", "123"]
console.log(regex.exec("world")); // ["world", "world", undefined]总结
可选的标识捕获组是一个非常有用的正则表达式语法，它可以帮助我们更好地处理多种匹配场景。在本文中，我们介绍了可选的标识捕获组的语法和使用方法，并提供了一些示例代码。希望本文可以帮助读者更好地理解和应用这个新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65810515d2f5e1655dc38af3