如何在 ECMAScript 2019 和 TypeScript 中使用可选捕获组

可选捕获组是在正则表达式中使用的一种特殊语法。它允许我们匹配一些文本，但在匹配的时候并不强制要求这部分文本存在。从 ECMAScript 2018 开始，可选捕获组已经成为正则表达式的标准功能之一，并且在 TypeScript 中也得到了良好的支持。在本文中，我将向大家介绍可选捕获组的具体用法和如何在 ECMAScript 2019 和 TypeScript 中使用它。

可选捕获组的语法与作用

在正则表达式中，可选捕获组的语法为 (exp)?。其中 exp 是一个用于匹配文本的表达式。可选捕获组与普通捕获组的不同之处在于，如果表达式 exp 匹配失败，那么可选捕获组所匹配的文本就会被忽略。例如，对于表达式 /a(b)?c/，对于字符串 ac，匹配结果就是 a 和 c，而 (b) 所匹配的部分则被忽略。

可选捕获组的最大作用就是在处理可选的文本时，可以将代码写的更加紧凑和优雅。例如，在处理 URL 时，我们经常需要先判断该 URL 是否包含协议部分。使用可选捕获组，可以将这个过程写成如下代码：

const urlRegex = /^(https?:\/\/)?(.*)$/;

function parseUrl(url) {
  const [, protocol, path] = url.match(urlRegex);
  if (protocol) {
    // 处理带有协议的 URL
  } else {
    // 处理不带协议的 URL
  }
}

代码中，我们使用了可选捕获组 ^(https?:\/\/)? 来匹配 URL 中的协议部分。这个正则表达式可以匹配的 URL 有两种形式，一种是带有协议的，比如 https://example.com/，另一种是没有协议的，比如 example.com/。如果 URL 中不包含协议，那么可选捕获组所匹配的部分就是空字符串，这个部分会被忽略掉。

在 ECMAScript 2019 中使用可选捕获组

在 ECMAScript 2019 中，可选捕获组的支持已经成为了正则表达式的标准功能。我们可以在正则表达式中使用 ? 来表示这是一个可选捕获组。例如，对于上面的例子，我们可以这样写：

const urlRegex = /^(https?:\/\/)?(.*)$/;

function parseUrl(url) {
  const [, protocol, path] = urlRegex.exec(url);
  if (protocol) {
    // 处理带有协议的 URL
  } else {
    // 处理不带协议的 URL
  }
}

代码中，我们使用了 ? 来表示这个捕获组是可选的。

在 TypeScript 中使用可选捕获组

TypeScript 对 ECMAScript 2019 中的可选捕获组提供了良好的支持。我们可以使用可选捕获组来编写更加类型安全的正则表达式。例如，对于上面的例子，我们可以这样写：

const urlRegex = /^(https?:\/\/)?(.*)$/;

function parseUrl(url: string) {
  const [, protocol = "", path = ""] = urlRegex.exec(url) ?? [];
  if (protocol) {
    // 处理带有协议的 URL
  } else {
    // 处理不带协议的 URL
  }
}

代码中，我们使用可选捕获组 (exp)? 来定义正则表达式。由于捕获组是可选的，我们需要为其设置默认值。在 TypeScript 中，我们可以使用 = 来为变量设置默认值。为了避免出现 undefined，我们还需要对结果进行一次 nullish 合并操作，这样才能保证返回值不为 undefined。

总结

在本文中，我们学习了如何在 ECMAScript 2019 和 TypeScript 中使用可选捕获组。可选捕获组可以帮助我们处理可选的文本，并将代码写得更加紧凑和优雅。在 TypeScript 中，我们还可以使用可选捕获组来编写更加类型安全的正则表达式。如果您在开发过程中需要使用正则表达式，建议您掌握可选捕获组的基本用法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65908fafeb4cecbf2d5e6639