来学学es6的正则表达式

154 阅读2分钟

这是我参与11月更文挑战的第26天,活动详情查看:2021最后一次更文挑战

问题

面试官:你能说说讲讲es6对正则做了哪些改进吗?

面试者:增加了u修饰符,还有y修饰符,flags属性等等。

面试官:那你能展开说说吗?

面试者:可以啊,巴拉巴拉小魔仙。。。

面试官:很好,不错。

以上场景纯属虚构,如有雷同,可能是巧合。

今天来学学ees6的正则表达式。

es6的正则表达式

u修饰符

这个修饰符主要是针对码点大于\uFFFF的unicode字符,之前的话对于这些unicode的字符正则是无法识别的。可以通过下面这个例子看看

var str = "😁"
str.codePointAt().toString(16) // '1f601'

可以看到这个码点是大于\uFFFF的。

var str = "😁"
console.log(/^.$/.test(str)) // false

var str = "😁"
console.log(/^.$/u.test(str)) // true

利用.这个点字符,它只能匹配小于\uFFFF的单字符,加上^,$,导致返回false。如果加上u修饰符,就可以匹配大于\uFFFF的unicode字符,然后返回true。

u修饰符下,可以使用{}带上码点表示一个unicode字符。

console.log(/\u{0061}/.test('a')) // false
console.log(/\u{0061}/u.test('a')) // true

unicode属性

正则表达式原型链上加上了一个unicode属性,表示是否采用了u修饰符。

var reg = /123/
console.log(reg.unicode) // false

var reg = /123/u
console.log(reg.unicode) // true

y修饰符

y修饰符也算是全局匹配,但是它和全局匹配g修饰符不一样的,它必须要满足下一次匹配必须要从第一位开始,不然匹配就不成功。

var reg1 = /123/g
var reg2 = /123/y

console.log('123_123'.match(reg1)) // ['123', '123']
console.log('123_123'.match(reg2)) // ['123']

可以看到,加了y修饰符后,由于下一次匹配是从_开始,导致不能匹配,只返回第一次匹配的123。

sticky属性

正则表达式原型链上加上了一个sticky属性,表示是否采用了y修饰符。

var reg = /123/g
console.log(reg.sticky) // false

var reg = /123/y
console.log(reg.sticky) // true

flags属性

正则表达式原型链上增加了一个flags属性,返回正则表达式使用了哪些修饰符。

var reg = /123/gi
console.log(reg.flags) // gi

var reg = /123/uyim
console.log(reg.flags) // imuy

s修饰符

.这个点字符可以匹配任意字符,但是\n除外。现在加了s修饰符,也可以匹配\n

var reg = /aaa.bbb/
console.log(reg.test('aaa\nbbb')) // false

var reg = /aaa.bbb/s
console.log(reg.test('aaa\nbbb')) // true

参考

正则的扩展