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 属性转义和字符类集合操作,开发者可以更高效地处理各种文本数据。这使得正则表达式在现代应用中的应用变得更加灵活和强大。

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

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

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距