ES2024|ES15已发布 前端可以判断表情包了? 正则 “v” 标记成为亮点 快来看看

简介: 【8月更文挑战第3天】

导文

This was approved on June 26th, 2024 by the Ecma GA.
2024 年 6 月 26 日,第 127 届 Ecma 大会批准了 ECMAScript 2024 语言规范,这意味着它现在正式成为标准。

项目地址:https://github.com/tc39/ecma262/releases
文档地址:https://tc39.es/ecma262/2024/
image.png

在 JavaScript 正则表达式中,v 标志是 u 标志的扩展,提供了一些新的功能,使得处理 Unicode 和字符类操作更加灵活和强大。本文将详细解读 v 标志的两大主要功能,并展示如何在实际编码中应用这些功能。

Unicode 属性

v 标志引入了对 Unicode 属性的支持,通过 \p{...}\P{...} 语法,开发者可以根据字符的 Unicode 属性来构造正则表达式。例如,\p{RGI_Emoji} 用于匹配任何表情符号,而 \p{White_Space} 匹配所有空白字符。

示例代码

const re = /^\p{
   
   RGI_Emoji}$/v;

// 匹配仅包含一个代码点的表情符号:
console.log(re.test('⚽')); // 输出: true ✅

// 匹配由多个代码点组成的表情符号:
console.log(re.test('👨🏾‍⚕️')); // 输出: true ✅

在上面的代码中,正则表达式 ^\p{RGI_Emoji}$ 匹配任何单一表情符号,包括复杂的组合表情符号。这种功能使得正则表达式可以更加准确地处理各种 Unicode 字符。

集合操作

v 标志还允许在字符类之间进行集合操作,这意味着可以使用 && 操作符执行字符类的交集。例如,表达式 [\p{White_Space}&&\p{ASCII}] 匹配既是空白字符又是 ASCII 字符的字符。

示例代码

const re = /[\p{
   
   White_Space}&&\p{
   
   ASCII}]/v;

// 匹配常见的换行符:
console.log(re.test('\n')); // 输出: true

// 匹配其他 Unicode 空白字符,例如行分隔符:
console.log(re.test('\u2028')); // 输出: false

在这个例子中,正则表达式 [\p{White_Space}&&\p{ASCII}] 用于匹配 ASCII 空白字符,如换行符,但不匹配其他 Unicode 空白字符(如行分隔符)。这种集合操作为字符匹配提供了更精确的控制。

总结

v 标志增强了 JavaScript 正则表达式在处理 Unicode 和字符类操作方面的能力。通过 Unicode 属性转义和字符类集合操作,开发者可以更高效地处理各种文本数据。这使得正则表达式在现代应用中的应用变得更加灵活和强大。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

目录
相关文章
|
7月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
138 1
|
3月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
107 1
|
8天前
|
前端开发 数据可视化 JavaScript
前端echarts加标记点及标记线和提示框
通过本文的介绍,希望您能够深入理解和掌握如何在ECharts中添加标记点、标记线和提示框,并在实际项目中灵活运用这些功能,提升数据可视化效果。
25 4
|
2月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
130 0
|
3月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
343 1
|
5月前
|
缓存 前端开发 JavaScript
前端优化之路:打包文件拆包、增加哈希值
前面对项目打包做了优化处理,但是还不够完美,有两点可继续优化。
|
5月前
|
前端开发 JavaScript
前端 JS 经典:Vite 分包配置
前端 JS 经典:Vite 分包配置
153 0
|
7月前
|
存储 弹性计算 前端开发
ECS负载问题之前端包加载很慢如何解决
ECS(Elastic Compute Service,弹性计算服务)是云计算服务提供商提供的一种基础云服务,允许用户在云端获取和配置虚拟服务器。以下是ECS服务使用中的一些常见问题及其解答的合集:
|
7月前
|
前端开发 Java 网络安全
解决docker中运行的jar包连不上前端程序
解决docker中运行的jar包连不上前端程序
|
缓存 前端开发 JavaScript
作为面试官,为什么我推荐微前端作为前端面试的亮点?-2
你能解释一下 qiankun 的 start 函数的作用和参数吗?如果只有一个子项目,你会如何启用预加载?
199 0
下一篇
DataWorks