正则表达式在前端开发中非常常见,是一种强大的文本匹配工具。在 ES9 中,正则表达式语法得到了升级,引入了新的特性,同时也有些语法被弃用。本文将深入探究 JavaScript ES9 中的新旧正则表达式语法,并且给出示例代码和学习指导。
正则表达式语法的变化
1. /s 修饰符的引入
在ES9之前,如果要匹配包括换行符的任意字符,需要使用 [\s\S] 或 [\d\D] 或 [\w\W]等方式,而在ES9中引入了 /s 修饰符,简化了这种匹配方式。
const str = `hello world` const regexOld = /hello[\s\S]*world/ const regexNew = /hello.*world/s console.log(regexOld.test(str)) // true console.log(regexNew.test(str)) // true
2. 命名捕获组的支持
在旧的正则表达式语法中,只能通过序号来访问捕获组的匹配结果,而在ES9中,可以通过命名来访问捕获组的匹配结果,更加方便和易读。
const regexOld = /(\d{4})-(\d{2})-(\d{2})/ const regexNew = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ const matchOld = regexOld.exec('2021-09-28') console.log(`Year: ${matchOld[1]}, Month: ${matchOld[2]}, Day: ${matchOld[3]}`) const matchNew = regexNew.exec('2021-09-28') console.log(`Year: ${matchNew.groups.year}, Month: ${matchNew.groups.month}, Day: ${matchNew.groups.day}`)
3. Unicode 转义符的支持
在旧的正则表达式语法中,只能对 ASCII 字符进行转义,而对于 Unicode 字符需要使用 Unicode 编码来进行匹配。在ES9中,新增了 Unicode 转义符,可以通过 Unicode 编码中的字符名称来进行匹配。
// 旧的写法 const regexOld = /\u{1F600}/ // 新的写法 const regexNew = /\p{Emoji_MODIFIER_BASE}+/u console.log('😀'.match(regexOld)) // [ '😀', index: 0, input: '😀', groups: undefined ] console.log('😀'.match(regexNew)) // [ '😀', index: 0, input: '😀', groups: undefined ]
如何使用新的正则表达式语法
在使用新的正则表达式语法时,需要将正则表达式的第二个参数修改为 'u',以开启 Unicode 模式。
// javascriptcn.com 代码示例 const str = 'Hello, 世界' const regex = /[\u4E00-\u9FA5]+/ console.log(str.match(regex)) // [ '世界', index: 7, input: 'Hello, 世界', groups: undefined ] // 如果要支持 Unicode 转义符,需要开启 Unicode 模式 const regexNew = /\p{sc=Han}+/u console.log(str.match(regexNew)) // [ '世界', index: 7, input: 'Hello, 世界', groups: undefined ]
总结
ES9 中新增的正则表达式语法的支持为前端开发带来了更加强大且易于操作的工具。在编写正则表达式时,开发者可以针对不同的需求选择新的或者旧的语法进行匹配,以提高代码的可读性和可维护性。同时,在使用新的语法时,需要注意开启 Unicode 模式,以支持 Unicode 转义符的匹配。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6541bf877d4982a6ebb5afbd