脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES6正则表达式新功能

ES6正则表达式的一些新功能总结

 更新时间：2017年05月09日 09:56:53   作者：sexy_squirrel  
这篇文章主要总结了一些关于ES6正则表达式的新功能的相关资料，文中介绍的还是比较详细，对大家具有一定的参考学习价值，需要的朋友们下来要起看看吧。

本文主要总结了ES6正则表达式的一些新功能，分享出来供大家参考学习，下面来看看详细的介绍：

一、构造函数实例化参数的变化

大家都知道，在ES5中，new RegExp(参数1,参数2)，参数1若是指定了正则修饰符，则参数2就不应该出现，否则将会报错，在ES6中，第二个参数的正则修饰符会覆盖掉原有的修饰符：

<script>
//在ES5中，下面的正则自带修饰符ig，则第二个参数不能出现
var reg = new RegExp(/asd/ig);
//在ES6中，如下：
var reg = new RegExp(/asd/ig,'i');
//i会覆盖掉原来的ig
</script>

二、u修饰符

u修饰符可以自动识别码点大于0xFFFF的编码。只是ES6的新增内容！

<script>
/\uD83D/u.test("\uD83D\uDC2A");
//在ES6中会返回false，u修饰符默认处理的UTF-16编码
/\uD83D/.test("\uD83D\uDC2A");
//在ES5中会将test的的参数拆分成两个字符，返回true
</script>

另外使用u修饰符需要注意一下几点：

1. “.”字符

在正则表达式中，.字符的含义是除了换行符以外的所有字符，如要.字符匹配码点大于\uFFFF的字符，必须带u修饰符，否则不能正常识别；

<svcipt>
var s = "��";
//在ES5中
/^.$/.test(s)//false
//在ES6中
/^.$/u.test(s)//true
</script>

2.Unicode字符表示法

ES6中新增使用了大括号表示Unicode字符，这种方法在正则表达式中必须加上u修饰符才能识别。

<svcipt>
//在ES5中,61会被当做量词使用
/\u{61}/.test("a")//false
//在ES6中
/\u{61}/u.test("a")//true
</script>

3.预定义模式

u修饰符也影响到预定义模式，加了u修饰符，才能正确识别码点大于0xFFFF的Unicode字符。

4.对i修饰符的影响

有些Unicode编码的字符比较接近，比如大写的K的编码有\u004B和\u212A，

<svcipt>
//未添加u修饰
/[a-z]/.test("\u212A")//false
//添加u修饰
/[a-z]/iu.test("\u212A")//true
</script>

三、y修饰符

ES6还新增了一个y修饰符，与通常的g修饰符用法类似，都是用来全局匹配，不同的是y修饰符又叫做“粘连”修饰符，在上一次匹配成功的下一个位置开始匹配，但是下一次开始位置必须要能够满足匹配，也就是匹配从剩余的第一个位置开始，这就是“粘连”的含义（个人理解）吧。

举个例子吧！

<svcipt>
var s = qqqq_q_qq;
var r1 = /q+/g;
var r2 = /q+/y
//第一次匹配
r1.exec(s)//["qqqq"]
r2.exec(s)//["qqqq"]
//第二次匹配
r1.exec(s)//["qqq"]
r2.exec(s)//null
</script>

注意：y修饰符隐含了头部匹配的标志^

/a/.exec("bdab");//null
/a/.exec("abbd");//["a"]

开头必须匹配上

四、新增属性

1.sticky属性

      判断正则是否设置了y修饰符。

      返回布尔值。

2.flags属性

      返回正则的修饰符

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • JavaScript保护密钥的方法详解

    JavaScript保护密钥的方法详解

    在前端js编程中,如果涉及到加密通信、加密算法,经常会用到密钥,但密钥,很容易暴露, 暴露原因：js代码透明,在浏览器中可以查看源码,从中找到密钥,所以本文给大家介绍了前端js中如何保护密钥,需要的朋友可以参考下
    2024-10-10
  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目，用到了bootstrap的折叠功能，这个功能需要只展开一个折叠框，点击一个就会自动隐藏另一个，实现起来也很容易，但是在测试时同事提出了一个bug，怎么解决呢？今天小编通过本教程给大家分享下
    2017-02-02
  • onkeydown事件解决按回车键直接提交数据的需求

    onkeydown事件解决按回车键直接提交数据的需求

    登陆页面需要扑捉用户按下回车自动提交的需求，于是相到在body里添加onkeydown事件跳javascript在提交表单，具体看下实现代码，希望对你有所帮助
    2013-04-04
  • 浅析JSONP技术原理及实现

    浅析JSONP技术原理及实现

    这篇文章主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 详解JavaScript 的执行机制

    详解JavaScript 的执行机制

    这篇文章主要介绍了JavaScript 的执行机制，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JS实现图片预加载无需等待

    JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片
    2012-12-12
  • js delete 用法(删除对象属性及变量)

    js delete 用法(删除对象属性及变量)

    js delete可以删除对象属性及变量，下面是一些示例，感兴趣的朋友可以看看
    2014-08-08
  • TypeScript 使用 Tuple Union 声明函数重载

    TypeScript 使用 Tuple Union 声明函数重载

    这篇文章主要介绍了TypeScript 使用 Tuple Union 声明函数重载，TypeScript 中为函数添加多个签名后，依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数，下文就来探索方法和技巧吧
    2022-04-04
  • 仿百度输入框智能提示的js代码

    仿百度输入框智能提示的js代码

    这篇文章介绍了仿百度输入框智能提示的js代码，有需要的朋友可以参考一下
    2013-08-08
  • JS+CSS实现3D切割轮播图

    JS+CSS实现3D切割轮播图

    这篇文章主要为大家详细介绍了JS+CSS实现3D切割轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论