为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

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”中前面是"" role="presentation">42”中前面是"42”中前面是"”的数字:

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

下面示例是Negative lookbehind,匹配字符串“42”中前面不是是&quot;" role="presentation">42”中前面不是是"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遗留特性是最好的方法。因此,这个提案有助于保证兼容性。

翻译原文

学不动了,ECMAScript2018都来了的更多相关文章

  1. JDK 12又来了,我学不动了...

    写在前面 看到 JDK 12又发布了,萌新不知不觉感觉瑟瑟发抖,从 Java 1.8的函数式编程思维和范式 到 Java 1.9的模块化特性的加持 以及还没来得及深切感受一下 Java 1.11 的 ...

  2. 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone

    听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...

  3. 恢复训练(学不动了摸会鱼) Pt. 1

    本来下午想把pre稿子写了,咕咕咕. 群论是啥也不会了,写个polya试试(手动doge)为什么博客媛没有emoji,以后万一自己搭博客一定要加上这个小东西 polya淼题:poj1286 先复吸一下 ...

  4. 从零开始学Electron笔记(一)

    前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...

  5. 跟我一起学Redis之Redis概述

    背景 技术的更新迭代,是程序员最最最头大的事,总是在每个网络角落中有感慨声:学不动啦: 其实新技术并不是凭空而出,而是随着业务推进.数据驱动.技术积累促使开发者的不断探索和实践,最终横空出世--&qu ...

  6. 学多少年才算“精通Java”?

    我从毕业做程序员就开始用 Java,到现在已经工作快 20 年了.减去我做手游用 C++.Lua 的几年,再减去后来转管理写代码少的时间,我真正写 Java 代码的时间至少也在 10 年以上. 如果你 ...

  7. 深度神经网络结构以及Pre-Training的理解

    Logistic回归.传统多层神经网络 1.1 线性回归.线性神经网络.Logistic/Softmax回归 线性回归是用于数据拟合的常规手段,其任务是优化目标函数:$h(\theta )=\thet ...

  8. Android学习路径图

    一个PHPer转战Android学习过程: 直接跨过java的学习,原因有我之前看过毕向东和张孝祥的Java基础课程,虽然中间好几次看睡着,但java的环境是能跑起来的.我建议大家如果没有Java基础 ...

  9. PHPer转战Android的学习过程以及Android学习

    原文作者: eoeadmin原文地址: http://my.eoe.cn/shuhai/archive/19684.html-------------------------------------- ...

随机推荐

  1. add web server(nginx)

    #!/bin/bash # # Web Server Install Script # Last Updated 2012.09.24 # ##### modify by WanJie 2012.09 ...

  2. RabbitMQ中客户端的Channel类里各方法释义

    // The contents of this file are subject to the Mozilla Public License // Version 1.1 (the "Lic ...

  3. 调试阶段 获取微信小程序openid

    wx.login({ success: function(res) { //首先获取用户code //res.code wx.request({ url: 'https://api.weixin.qq ...

  4. 一脸懵逼搭建Zookeeper分布式集群

    1:首先将http://zookeeper.apache.org/ 下载好的zookeeper-3.4.5.tar.gz上传到三台虚拟机上,之前博客搭建好的(安装Zookeeper之前记得安装好你的j ...

  5. linux inotify 文件变化检测

    用webstorm开发angular项目的时候,改写文件后发现热更新有时候会失效,从而不得不重新运行下项目,然而这浪费了好多时间,google一番后,解决办法如下 echo fs.inotify.ma ...

  6. (4).NET CORE微服务 Micro-Service ---- Consul服务发现和消费

    上一章说了  Consul服务注册  现在我要连接上Consul里面的服务 请求它们的API接口 应该怎么做呢? 1.找Consul要一台你需要的服务器 1.1 获取Consul下的所有注册的服务 u ...

  7. js条件语句初步练习

    var a=18            if(a<10){                alert("便宜")            }            else{  ...

  8. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  9. Derive representation formula from Green’s identity

    This article introduces how to derive the representation formula used in BEM from Green's identity. ...

  10. 10个财务工作中常用的 Excel 万能公式

    1.多条件判断公式 =IF(AND(条件1,条件2...条件n),同时满足条件返回的值,不满足条件返回的值) =IF(OR(条件1,条件2...条件n),同时满足任一条件返回的值,不满足条件返回的值) ...