zoukankan      html  css  js  c++  java
  • 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
    bar'); // false
    

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

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

    /foo.bar/su.test('foo
    bar'); // 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 = /[0-9a-fA-F]+/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累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!

    版权声明:
    转载时请注明作者Fundebug以及本文地址:
    https://blog.fundebug.com/2018/08/30/ecmascript-regular-expression-new-features/

  • 相关阅读:
    《动手学深度学习》系列笔记—— 1.3 多层感知机
    angular 9.1.0发布,下一个版本:angular10
    postgresql 两行数据时间之差
    abp zero bug
    docker nginx angular 刷新错误,404错误
    EF Core 新特性——Owned Entity Types
    identityServer4 中的概念(Scope,claim)
    程序员工作时间简单分析
    吐槽下阿里云栖大会购票系统
    打造适合你的ABP(1)---- 完善日志系统
  • 原文地址:https://www.cnblogs.com/fundebug/p/es6_new_regx_features.html
Copyright © 2011-2022 走看看