ECMAScript正则表达式6个最新特性

译者按: 还没学好 ES6?ECMAScript 2018 已经到来啦!

本文采用意译,版权归原作者所有

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

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

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

1. dotAll 模式(s 选项)

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

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

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

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

ES2018 引入了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 断言

下面示例是 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

Fundebug专注于网页、微信小程序、微信小游戏,支付宝小程序,React Native,Node.js 和 Java 线上 BUG 实时监控,欢迎免费试用

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使得我们可以使用 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让这个操作变得更加简单了。

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.prototype.compile方法以及它的静态属性从RegExp.\$1RegExp.\$9。虽然这些特性已经弃用(deprecated)了,但是为了兼容性我们不能将他们去。因此,规范这些 RegExp 遗留特性是最好的方法。因此,这个提案有助于保证兼容性。

参考

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用

您的用户遇到BUG了吗?

体验Demo 免费使用