在 JavaScript 中，正则表达式是非常重要的一个技能点，而 ECMAScript 2019 中加入的可选捕获组是一种比较新颖的功能，在某些场景下可以帮助我们更加简化代码，提高代码的可维护性。
什么是可选捕获组
可选捕获组是一种基于正则表达式的语法，它允许某些匹配项在匹配时只是一种可选项。我们可以通过正则表达式来定义一个携带可选捕获组的模式，然后通过执行匹配操作获取到捕获组的结果。
ECMAScript 2019 中通过在正则表达式中使用问号加括号的方式来实现可选捕获组，如下所示：
// 匹配一个字符串中出现的数字，可能包含一个小数点
const pattern = /^(\d+(?:\.\d+)?)$/;
console.log(pattern.exec('123')); // ["123", "123", undefined]
console.log(pattern.exec('123.45')); // ["123.45", "123.45", ".45"]在上面的例子中，我们使用了问号加括号的方式来定义了一个可选捕获组 (?:\.\d+)?，在这个模式中，小数点和小数部分是可选的，这就允许了字符串中只有整数部分的情况。
需要注意的是，在上面的例子中，我们使用了非捕获组 (?:) 来包裹了小数点和小数部分的整体，这是因为我们只希望这个部分作为一个整体出现在模式中，而不需要它单独成为一个捕获组。
可选捕获组的使用场景
可选捕获组是一种比较新颖的功能，它可以解决一些之前比较繁琐的处理问题，同时也可以提高代码的可读性和可维护性。下面我们通过几个例子来看看可选捕获组的应用场景。
1. 可选参数
在 JavaScript 中，函数可以带有多个参数，有些参数是可选的，有些参数是必须的。在处理这种情况时，我们通常使用默认值或者判断语句来做处理，比如：
-- -------------------- ---- -------
-------- ------ -- -
-- ------- - --- ------------ -
- - --
-
------ - - --
-
-------------------- -- -
------------------ ---- -- -使用可选捕获组可以更加简化这部分的代码，我们只需要在正则表达式中定义一个可选捕获组，然后通过解构赋值来获取参数的值即可，如下所示：
function sum(input) {
const [, a = 0, b = 0] = /^(\d+)?(?:\s*,\s*(\d+))?$/.exec(input) || [];
return Number(a) + Number(b);
}
console.log(sum('1')); // 1
console.log(sum('1,2')); // 3在上面的例子中，我们定义了一个正则表达式来匹配一个可选的数字参数，然后通过解构赋值来获取参数的值，这样就可以避免使用 if 判断语句的情况，提高代码的可读性。
需要注意的是，最后我们加上了一个空数组的默认值，这是为了处理如果没有参数输入的情况，避免程序报错。
2. 动态 URL
在 Web 开发中，我们经常会遇到处理动态 URL 的情况，比如 RESTful API 的路由定义。通常情况下我们需要从 URL 中解析出路由参数，包括路径参数和查询参数。
使用可选捕获组可以更加方便地处理这种情况，例如：
-- -------------------- ---- ------- -- ------ ----- ------- - -------------------------------------- ----- ------ - ------------ ----- ------ - ---------------- ----- ------ - -------------------------- ----- -- --- ------ - -------------------- -- --- --------------- ------- -- --------- --------- ----- -- ---- ------- - -------------------- -- --- ---------------- -------- -- --- --------- ----- -- ---- ------- - -------------------- -- --- ---------------- -------- -- --- ---------
在上面的例子中，我们定义了一个匹配动态路由的正则表达式，通过在正则表达式中定义两个可选捕获组来分别匹配路径参数和查询参数。
需要注意的是，正则表达式中使用了两个非捕获组 (?:) 来包裹路径参数和查询参数的整体，这是因为我们只希望这两个部分作为一个整体出现在模式中，而不需要它们单独成为一个捕获组，这样可以避免使用到不必要的索引。
总结
通过本文的介绍，我们了解了 ECMAScript 2019 中的可选捕获组的特性，以及它的使用场景。可选捕获组是一种比较优雅的语法，可以帮助我们解决一些之前比较繁琐的处理问题，从而提高代码的可读性和可维护性。在实际开发中，我们可以根据实际情况来灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664d4e5cd3423812e4c91732