极简三分钟ES6 - 正则表达式的扩展

Unicode 支持:u 修饰符

作用:正确处理复杂的 Unicode 字符(如表情符号 𐐷)

传统问题

ES5 将 4 字节的 Unicode 字符(如 \uD83D\uDC2A)拆成两个字符

js 复制代码
/^\uD83D/.test('\uD83D\uDC2A'); // true(错误识别)

u 的改进

添加 u 后,正则将其视为一个整体字符

js 复制代码
/^\uD83D/u.test('\uD83D\uDC2A'); // false(正确识别)

其他增强

  • 点字符 . 可匹配 Unicode 字符:/^.$/u.test('🐱') // true
  • 正确计算 Unicode 字符串长度
js 复制代码
function length(str) {{
  return str.match(/./gu)?.length  || 0; // 使用 u 修饰符
}}
length('𠮷𠮷') // 2(传统方式返回 4)

粘连匹配:y 修饰符

作用 :强制从上一次匹配结束的位置开始匹配,类似"贪吃蛇"步步推进

对比 g 修饰符

  • g:全局匹配,跳过不匹配的位置。
  • y:必须连续匹配,否则失败。

应用场景

语法解析、模板引擎等需要严格连续匹配的场景

具名组匹配:给分组起名字

作用:用名字替代数字编号的分组,代码更易读

传统问题

分组只能通过 [1][2] 引用,顺序变动会导致错误

js 复制代码
const date = /(\d{4})-(\d{2})-(\d{2})/.exec('2025-09-05'); console.log(date[1]); // "2025"(但开发者需记住 1 是年份)

ES6 解决方案

使用 (?<组名>) 命名分组,通过 groups 属性访问

js 复制代码
const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u.exec('2025-09-05'); console.log(date.groups.year); // "2025"(清晰直观)

其他一些实用扩展

s 修饰符:点号匹配所有字符

传统点号 . 不匹配换行符 \ns 修饰符解决此问题

js 复制代码
/hello.world/.test('hello\nworld'); // false 
/hello.world/s.test('hello\nworld'); // true

正则属性扩展

  • sticky 属性:检测是否启用 y 修饰符(reg.sticky
  • flags 属性:返回正则的修饰符字符串(如 "gu"
js 复制代码
const reg = /abc/gy;
console.log(reg.flags);  // "gy"

构造函数优化

支持直接复制正则表达式,并可覆盖修饰符

js 复制代码
const reg1 = /abc/i;
const reg2 = new RegExp(reg1, 'g'); // 复用 reg1 但改为 g 修饰符 

ES6 正则 vs ES5

特性 ES6 方案 ES5 限制
Unicode 支持 u 修饰符 无法识别 4 字节字符
连续匹配 y 修饰符(粘连匹配) g(可跳过字符)
分组可读性 具名组 (?<name>) 数字索引(易混乱)
换行符匹配 s 修饰符 点号不匹配 \n
修饰符检测 reg.flags 无直接获取方式

牢记

"u 治乱码,y 抓连续,具名分组不迷路,点号加 s 破换行。"

相关推荐
雨季66613 分钟前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
天人合一peng27 分钟前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
会飞的战斗鸡1 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling1 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_177767371 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区2 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO2 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
烬头88212 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos