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


Posted in Javascript onMay 09, 2017

本文主要总结了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 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
Vuex和前端缓存的整合策略详解
May 09 #Javascript
基于JS实现限时抢购倒计时间表代码
May 09 #Javascript
js使用i18n实现页面国际化的方法
May 09 #Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 #Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 #Javascript
JavaScript中splice与slice的区别
May 09 #Javascript
详解node中创建服务进程
May 09 #Javascript
You might like
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php自定义hash函数实例
2015/05/05 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python打包成so文件过程解析
2019/09/28 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
人力资源主管的岗位职责
2014/03/15 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
授权委托书
2015/01/28 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
小学运动会加油稿
2015/07/22 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS