可选捕获组是在正则表达式中使用的一种特殊语法。它允许我们匹配一些文本，但在匹配的时候并不强制要求这部分文本存在。从 ECMAScript 2018 开始，可选捕获组已经成为正则表达式的标准功能之一，并且在 TypeScript 中也得到了良好的支持。在本文中，我将向大家介绍可选捕获组的具体用法和如何在 ECMAScript 2019 和 TypeScript 中使用它。
可选捕获组的语法与作用
在正则表达式中，可选捕获组的语法为 (exp)?。其中 exp 是一个用于匹配文本的表达式。可选捕获组与普通捕获组的不同之处在于，如果表达式 exp 匹配失败，那么可选捕获组所匹配的文本就会被忽略。例如，对于表达式 /a(b)?c/，对于字符串 ac，匹配结果就是 a 和 c，而 (b) 所匹配的部分则被忽略。
可选捕获组的最大作用就是在处理可选的文本时，可以将代码写的更加紧凑和优雅。例如，在处理 URL 时，我们经常需要先判断该 URL 是否包含协议部分。使用可选捕获组，可以将这个过程写成如下代码：
-- -------------------- ---- -------
----- -------- - -----------------------
-------- ------------- -
----- -- --------- ----- - --------------------
-- ---------- -
-- ------- ---
- ---- -
-- ------- ---
-
-代码中，我们使用了可选捕获组 ^(https?:\/\/)? 来匹配 URL 中的协议部分。这个正则表达式可以匹配的 URL 有两种形式，一种是带有协议的，比如 https://example.com/，另一种是没有协议的，比如 example.com/。如果 URL 中不包含协议，那么可选捕获组所匹配的部分就是空字符串，这个部分会被忽略掉。
在 ECMAScript 2019 中使用可选捕获组
在 ECMAScript 2019 中，可选捕获组的支持已经成为了正则表达式的标准功能。我们可以在正则表达式中使用 ? 来表示这是一个可选捕获组。例如，对于上面的例子，我们可以这样写：
-- -------------------- ---- -------
----- -------- - -----------------------
-------- ------------- -
----- -- --------- ----- - -------------------
-- ---------- -
-- ------- ---
- ---- -
-- ------- ---
-
-代码中，我们使用了 ? 来表示这个捕获组是可选的。
在 TypeScript 中使用可选捕获组
TypeScript 对 ECMAScript 2019 中的可选捕获组提供了良好的支持。我们可以使用可选捕获组来编写更加类型安全的正则表达式。例如，对于上面的例子，我们可以这样写：
-- -------------------- ---- -------
----- -------- - -----------------------
-------- ------------- ------- -
----- -- -------- - --- ---- - --- - ------------------ -- ---
-- ---------- -
-- ------- ---
- ---- -
-- ------- ---
-
-代码中，我们使用可选捕获组 (exp)? 来定义正则表达式。由于捕获组是可选的，我们需要为其设置默认值。在 TypeScript 中，我们可以使用 = 来为变量设置默认值。为了避免出现 undefined，我们还需要对结果进行一次 nullish 合并操作，这样才能保证返回值不为 undefined。
总结
在本文中，我们学习了如何在 ECMAScript 2019 和 TypeScript 中使用可选捕获组。可选捕获组可以帮助我们处理可选的文本，并将代码写得更加紧凑和优雅。在 TypeScript 中，我们还可以使用可选捕获组来编写更加类型安全的正则表达式。如果您在开发过程中需要使用正则表达式，建议您掌握可选捕获组的基本用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65908fafeb4cecbf2d5e6639