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

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. 变相实现textarea文本域

    效果图: html: <div> <form action=""> <div class="ta-div" contentedit ...

  2. 泛微云桥e-Bridge安装手册

    有时候不看官方文档进行配置,可能会出现奇奇怪怪的问题,SO转载一下官方文档,顺带学习. 想超长体验此软件,请搜索本博客内容,有破解方法,仅用来学习使用,顺带进行二次开发,请勿使用在商业用途,谢谢. 泛 ...

  3. vi不保存退出

    To quit the vi editor without saving any changes you've made If you are currently in insert or appen ...

  4. reconnecting-websocket.js

    websocket是HTML5下一个不错的网络协议解决方案,有一个场景很多猿猿都会遇到,手机锁屏后大约60秒,IOS会自动断开websocket连接,连接丢失了,那我们的数据也就断了.websocke ...

  5. 最长k可重区间集问题&&最长k可重线段集问题

    题解: 洛谷上这两题的题意都是有问题的 按照标程题意不应该是开区间而是左开右闭区间 然后连边比较巧妙 我们可以看成选k条不相交的路径,其中i-i+1中有k条边 所以建图i-i+1流量为k,权值为0 l ...

  6. C++ 语法--变量和常量

    起步 Hello world! #include <iostream> int main() { std::cout<<"Hello, world!"; ; ...

  7. twitter typeahead控件使用经历

    typeahead控件可以用于自动完成这个功能,在jQuery的UI中也有自动完成的控件.以前都是用jQuery UI中的自动完成的控件,但这次想用个轻量级的自动完成的控件,因此就调查了一下typeh ...

  8. 【Arduino】开源开发板说明

    来自世界各地的新型微控制器层出不穷,这类开发板多数都是通过Arduino改进的版本,例如由Arduino所改良的Yún一样,主要是针对网状网路进行改进或升级了其它无线功能. 但一些开发板也有着其独到的 ...

  9. Linux Centos7安装最新anslib

    一.添加最新epel源 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 二.添加最 ...

  10. iframe获取元素

    原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...