【es6】具名组匹配

1、组匹配

正则表达式使用圆括号进行组匹配,如:const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;,三个圆括号形成了三个组匹配。

代码:

javascript 复制代码
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

2、具名组匹配

ES2018 引入了具名组匹配(Named Capture Groups),允许为每一个组匹配指定一个名字,既便于阅读代码,又便于引用。

javascript 复制代码
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // "1999"
const month = matchObj.groups.month; // "12"
const day = matchObj.groups.day; // "31"

上面代码中,"具名组匹配"在圆括号内部,模式的头部添加"问号 + 尖括号 + 组名"(?),然后就可以在exec方法返回结果的groups属性上引用该组名。同时,数字序号(matchObj[1])依然有效。

相关推荐
董世昌417 分钟前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕9 分钟前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript
warrah11 分钟前
前端项目容器化部署问题
前端·docker
GISer_Jing12 分钟前
2026前端技术潜在主流前沿方向
前端·人工智能·reactjs
切糕师学AI14 分钟前
Vue 中的生命周期钩子
前端·javascript·vue.js
掘金-我是哪吒15 分钟前
提升服务器性能,解决前端首页加载过慢的问题
运维·服务器·前端
摘星编程16 分钟前
React Native for OpenHarmony 实战:Platform 平台检测与判断
javascript·react native·react.js
暴富暴富暴富啦啦啦19 分钟前
使用 v-html 仅渲染新数据的方法
前端·javascript·vue.js
摘星编程20 分钟前
React Native for OpenHarmony 实战:Slider 滑块组件使用指南
javascript·react native·react.js
light_in_hand22 分钟前
CSS博客
前端·css