正则表达式是前端开发中常用的工具，它可以用来匹配、搜索、替换字符串。但是，正则表达式语法复杂，使用起来非常困难。幸运的是，ECMAScript 2019 引入了可选捕获组，这个新特性可以帮助我们简化正则表达式的语法。
可选捕获组是什么
可选捕获组是一个捕获组，但是它可以匹配一个可选的子表达式。如果子表达式不存在，捕获组会匹配一个空字符串。
在正则表达式中，我们可以使用圆括号来创建捕获组。例如，下面的正则表达式可以匹配一个由数字和字母组成的字符串，并将数字和字母分别保存到两个捕获组中：
const regex = /(\d+)([a-z]+)/;
const result = regex.exec('123abc');
console.log(result[1]); // '123'
console.log(result[2]); // 'abc'在上面的例子中，\d+ 和 [a-z]+ 分别是两个捕获组。
可选捕获组的语法和普通捕获组非常相似，只是在捕获组的最前面加一个问号。例如，下面的正则表达式可以匹配一个由数字和字母组成的字符串，其中数字是可选的：
-- -------------------- ---- ------- ----- ----- - ----------------- ----- ------- - --------------------- ----- ------- - ------------------ ------------------------ -- ----- ------------------------ -- ----- ------------------------ -- --------- ------------------------ -- -----
在上面的例子中，\d+ 前面的问号表示这个捕获组是可选的。当字符串中没有数字时，这个捕获组会匹配一个空字符串，因此 result2[1] 的值是 undefined。
可选捕获组的优势
可选捕获组的优势在于它可以简化正则表达式的语法。例如，如果我们想匹配一个字符串，它可能以 http:// 或 https:// 开头，我们可以使用下面的正则表达式：
const regex = /^(http:\/\/|https:\/\/)/;
在上面的正则表达式中，http:\/\/ 和 https:\/\/ 两个子表达式只有一个字符的差异，但是我们还是需要重复写两次。使用可选捕获组，我们可以将这个正则表达式简化为：
const regex = /^https?:\/\//;
在上面的正则表达式中，https? 表示 s 字符是可选的，这个捕获组是可选的。这样，我们就可以用一个更简单的正则表达式来匹配我们想要的字符串。
可选捕获组的指导意义
可选捕获组的出现，使得我们在编写正则表达式时更加灵活。它让我们能够用更少的代码来实现相同的功能，降低了代码的复杂度和难度。同时，它也让我们的代码更加易读，更容易维护。
在实际的开发中，我们可以尝试使用可选捕获组来简化我们的正则表达式，提高代码的可读性和可维护性。下面是一个示例代码，它演示了如何使用可选捕获组来匹配一个邮箱地址：
const regex = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+\.[a-zA-Z]{2,})?$/;
const result1 = regex.test('john.doe@example.com');
const result2 = regex.test('john.doe');
console.log(result1); // true
console.log(result2); // true在上面的正则表达式中，([a-zA-Z0-9.-]+\.[a-zA-Z]{2,})? 表示邮箱地址的域名是可选的，如果没有域名，这个捕获组会匹配一个空字符串。这样，我们就可以用一个更简单的正则表达式来匹配邮箱地址了。
结论
可选捕获组是 ECMAScript 2019 引入的一个新特性，它可以使正则表达式更加简洁、易读和易维护。在实际的开发中，我们可以尝试使用可选捕获组来简化我们的正则表达式，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742af6adb344dd98de1a74d