Javascript：ECMAScript2018正则表达式6个最新特性

我不是女神ヾ 2021-12-12 13:29 136阅读 0赞

原文：https://mathiasbynens.be/notes/es-regexp-proposals  
译文：https://www.codercto.com/a/24629.html

\-----------------------------------------------------------------------------------------------------------------------------------

1999年，ECMAScript 3添加了对正则表达式的支持。

16年之后，ECMAScript 6(即ECMAScript 2015或者ES6)引入了Unicode模式(u选项), [sticky模式(y选项)][sticky_y] 以及 [RegExp.prototype.flags的getter方法][RegExp.prototype.flags_getter] 。

这篇博客将介绍ECMAScript正则表达式的最新 **特性** ：

*  [dotAll模式(s选项)][dotAll_s]
 *  [Lookbehind断言][Lookbehind]
 *  [Named capture groups][]
 *  [Unicode property escapes][]
 *  [String.prototype.matchAll][]
 *  [规范RegExp遗留特性][RegExp]

### 1. dotAll模式(s选项) ###

这个特性已经在ECMAScript 2018正式发布了。

默认情况下， `.` 可以匹配任意字符，除了换行符:

>     /foo.bar/u.test('foo\nbar'); // false

另外， `.` 不能匹配Unicode字符，需要使用 `u` 选项启用Unicode模式才行。

ES2018引入了 [dotAll模式][dotAll] ，通过 `s` 选项可以启用，这样， `.` 就可以匹配换行符了。

>     /foo.bar/su.test('foo\nbar'); // true

### 2. Lookbehind断言 ###

这个特性已经在ECMAScript 2018正式发布了。

ECMAScript目前仅支持lookahead断言。

下面示例是Positive lookahead，匹配字符串“42 dollars”中紧跟着是"dollars"的数字：

>     const pattern = /\d+(?= dollars)/u;
>     const result = pattern.exec('42 dollars');
>     console.log(result[0]); // 打印42

下面示例是Negative lookahead，匹配字符串“42 pesos”中紧跟着的不是"dollars"的数字:

>     const pattern = /\d+(?! dollars)/u;
>     const result = pattern.exec('42 pesos');
>     console.log(result[0]); // 打印42

ES2018添加了 [lookbehind断言][lookbehind] 。

下面示例是Positive lookbehind，匹配字符串“$42”中前面是"$"的数字:

>     const pattern = /(?<=\$)\d+/u;
>     const result = pattern.exec('$42');
>     console.log(result[0]); // 打印42

下面示例是Negative lookbehind，匹配字符串“$42”中前面不是是"$"的数字:

>     const pattern = /(?<!\$)\d+/u;
>     const result = pattern.exec('€42');
>     console.log(result[0]); // 打印42

### 3. Named capture groups ###

这个特性已经在ECMAScript 2018正式发布了。

目前，正则表达式中小括号匹配的分组是通过数字编号的：

>     const pattern = /(\d{4})-(\d{2})-(\d{2})/u;
>     const result = pattern.exec('2017-01-25');
>     console.log(result[0]); // 打印"2017-01-25"
>     console.log(result[1]); // 打印"2017"
>     console.log(result[2]); // 打印"01"
>     console.log(result[3]); // 打印"25"

这样很方便，但是可读性很差，且不易维护。一旦正则表达式中小括号的顺序有变化时，我们就需要更新对应的数字编号。

ES2018添加 [named capture groups][] , 可以指定小括号中匹配内容的名称，这样可以提高代码的可读性，也便于维护。

>     const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
>     const result = pattern.exec('2017-01-25');
>     console.log(result.groups.year); // 打印"2017"
>     console.log(result.groups.month); // 打印"01"
>     console.log(result.groups.day); // 打印"25"

### 4. Unicode property escapes ###

这个特性已经在ECMAScript 2018正式发布了。

Unicode标准为每一个字符分配了多个属性。比如，当你要匹配希腊语字符时，则可以搜索Script\_Extensions属性为Greek的字符。

[Unicode property escapes][Unicode property escapes 1] 使得我们可以使用ECMAScript正则表达式直接匹配Unicode字符的属性：

>     const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
>     console.log(regexGreekSymbol.test('π')); // 打印true

### 5. String.prototype.matchAll ###

这个特性还处在Stage 3 Draft

g和y选项通常用于匹配一个字符串，然后遍历所有匹配的子串，包括小括号匹配的分组。 [String.prototype.matchAll][String.prototype.matchAll 1] 让这个操作变得更加简单了。

>     const string = 'Magic hex numbers: DEADBEEF CAFE 8BADF00D';
>     const regex = /\b[0-9a-fA-F]+\b/g;
>     for (const match of string.matchAll(regex)) {
>     	console.log(match);
>     }

每一个迭代所返回的match对象与regex.exec(string)所返回的结果相同：

>     // Iteration 1:
>     [
>     	'DEADBEEF',
>     	index: 19,
>     	input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
>     ]
>     
>     // Iteration 2:
>     [
>     	'CAFE',
>     	index: 28,
>     	input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
>     ]
>     
>     // Iteration 3:
>     [
>     	'8BADF00D',
>     	index: 33,
>     	input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
>     ]

注意，这个特性还处在Stage 3 Draft，因此还存在变化的可能性，示例代码是根据最新的提案写的。另外，浏览器也还没有支持这个特性。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。

### 6. 规范RegExp遗留特性 ###

这个提案还处在Stage 3 Draft

这个提案 [规范了RegExp的遗留特性][RegExp 1] ，比如 [RegExp.prototype.compile][] 方法以及它的静态属性从 **RegExp.$1** 到 **RegExp.$9** 。虽然这些特性已经弃用(deprecated)了，但是为了兼容性我们不能将他们去。因此，规范这些RegExp遗留特性是最好的方法。因此，这个提案有助于保证兼容性。

以上所述就是小编给大家介绍的《ECMAScript正则表达式6个最新特性》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 [码农网][Link 1] 的支持！

[sticky_y]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FRegExp%2Fsticky%23Description
[RegExp.prototype.flags_getter]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FRegExp%2Fflags
[dotAll_s]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23dotAll
[Lookbehind]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23lookbehinds
[Named capture groups]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23named-capture-groups
[Unicode property escapes]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23unicode-property-escapes
[String.prototype.matchAll]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23matchAll
[RegExp]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-regexp-proposals%23legacy
[dotAll]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-regexp-dotall-flag
[lookbehind]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-regexp-lookbehind
[named capture groups]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-regexp-named-groups
[Unicode property escapes 1]: https://link.juejin.im?target=https%3A%2F%2Fmathiasbynens.be%2Fnotes%2Fes-unicode-property-escapes
[String.prototype.matchAll 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-string-matchall
[RegExp 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-regexp-legacy-features
[RegExp.prototype.compile]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FRegExp%2Fcompile
[Link 1]: https://www.codercto.com