ECMAScript 2021 (ES12): New regex properties 一览

随着前端语言的不断发展,JavaScript 也在不断地更新迭代。其中,ES12 推出了一些新的正则表达式属性,让开发者在处理字符串时更加便捷。在本文中,我们将详细了解 ES12 中新增的正则表达式属性,并且结合示例代码进行介绍。

/s 修饰符

在 ES12 中,正则表达式新增了 /s 修饰符。该修饰符表示匹配任意单个字符(包括换行符)。如果不使用 /s 修饰符,由于默认是匹配任意单个字符,因此无法匹配到换行符。

举个例子:

----- --- - ---------------
-------------------------------------- -- ----
--------------------------------------- -- ----------------

在上面的例子中,由于默认情况下无法匹配到换行符,因此第一个 console.log 输出 null,而使用 /s 修饰符时,第二个 console.log 输出 ["hello\nworld"]。

具名捕获分组

在 ES12 中,正则表达式新增了具名捕获分组。在以往的版本中,我们使用 /(pattern)/ 来进行捕获分组。而在 ES12 版本中,我们可以使用 (?pattern) 的形式进行具名捕获分组。

举个例子:

----- --- - -------------
----- ----- - -----------------------------------------------
----- ----- - ----------------
-------------------------- -- - ----- ------- ------ ----- ---- ---- -

以上代码中,我们使用了具名捕获分组。其中, (?\d{4}) 表示捕获四个数字作为年份,名字为 year。同理,后面的两个组也进行了一样的操作。match.groups 包含了每个具名捕获分组的结果。

这样的语法糖可以让开发者更加方便地 debug 和全面理解代码逻辑。

前后断言

在 ES12 中,正则表达式新增了前后断言。前后断言能够在匹配某些字符串时,考虑到该字符串前面或者后面的内容,从而进行更加精确的匹配。在前后断言中,我们可以使用 (?<=...) 和 (?<!...) 来表示正向和负向前断言,使用 (?=...) 和 (?!...) 来表示正向和负向后断言。

举个例子:

----- ---- - ------- ------------
----- ------ - ----------- ----------
-------------------------------- -- --------------

----- ---- - ------- --------
----- ------ - ------ -----------
-------------------------------- -- --------- --------

在上面的代码中,我们先定义了两个字符串 str1 和 str2,并且定义了两个正则表达式 regex1 和 regex2。在 regex1 中,我们使用了前后断言 ?<=Hello, 和 \b\w+\b。意思是匹配以 Hello, 开头的单词。在匹配结果时,仅匹配 "JavaScript"。

在 regex2 中,我们引入了一个负向前断言 (?<!= ),匹配以非空格为开头的单词。在匹配结果时,我们返回了匹配到的所有单词。

RegExp.escape()

在 ES12 中,正则表达式新增了一个静态方法 RegExp.escape()。该方法能够将字符串转义,使得这个字符串可以直接当做字符串字面量使用。在以前的版本中,我们需要自己编写转义的逻辑,而在 ES12 版本中,我们可以直接使用该方法,极大的方便了开发者。

例如,在以前的版本中,我们需要将 . 替换为 .。而在 ES12 版本中,我们可以直接使用 RegExp.escape('.')。

举个例子:

----- --- - -------------------------
----- ----- - --- ------------------------------------------------
------------------------------ -- --------------------------

在上面的代码中,我们使用了 RegExp.escape() 将 javascript.programming 转义为 javascript.programming,进而生成了一个对应的正则表达式。在匹配时,可以得到 ["javascript.programming"]。

ES12 正则表达式总结

在 ES12 版本中,正则表达式新增了一些很实用的属性,这些新增加的属性可以方便开发人员更加便捷地处理字符串。在本文中,我们介绍了 /s 修饰符、具名捕获分组、前后断言和 RegExp.escape() 四个属性。这些属性优化了开发体验,进而提升了开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65234d6395b1f8cacdab8ee0


猜你喜欢

  • MongoDB 数据库优化经验总结

    前言 MongoDB 是一种非关系型数据库,它的主要特点是支持高性能、高可扩展性和灵活的数据模型。然而,在使用 MongoDB 的过程中,我们可能会遇到查询缓慢和不稳定的问题。

    1 年前
  • 使用 Jest 时如何跳过某些单元测试的技巧总结

    使用 Jest 时如何跳过某些单元测试的技巧总结 Jest 是一款著名的 JavaScript 测试工具,用于测试前端代码。通过 Jest,您可以通过编写测试代码来确保您的代码在不同情况下的正确性。

    1 年前
  • Fastify 与 WebAssembly 的使用

    在前端开发领域中,WebAssembly 是近年来备受关注的技术之一。它是一种能够提升 web 应用性能的技术,可以在浏览器中运行编写的高性能代码。Fastify 则是一个快速、低开销和可扩展的 No...

    1 年前
  • Hapi 框架中使用 Inert 和 Vision 实现静态文件和模板的渲染

    Hapi 框架是一个 Node.js 的 web 框架,它提供了完整的路由、输入验证、插件支持等功能。在 Hapi 框架中,可以使用 Inert 插件来加载静态文件,使用 Vision 插件来渲染模板...

    1 年前
  • SASS 中的 if 语句用法详解

    在前端开发中,SASS 是一个非常常用的 CSS 预处理器。SASS 提供了一些非常方便的语法来支持 CSS 的编写。在 SASS 中,if 语句是一个非常常用的语法,它可以在编写样式时实现条件判断。

    1 年前
  • ES7 中的 Array#fill 方法使用指南

    在ECMAScript 2016 (也称为ES7) 中,JavaScript 引入了新特性--Array#fill 方法,用于填充一个数组中指定范围内的所有元素。本文将介绍这一方法及其使用场景,并提供...

    1 年前
  • ES9 的新特性:Proxy.revocable() 方法创建可撤销的代理对象

    ES9 (ECMAScript 2018) 引入了 Proxy 对象作为一种元编程(meta-programming)方式,它可以拦截对象的基本操作(例如读取、写入和删除属性等),并且可以让我们实现高...

    1 年前
  • 使用 Webpack Alias 优化前端开发路径

    Webpack 是一个强大的构建工具,它可以将前端代码打包成可用于浏览器中的 JavaScript、CSS 和 HTML 等静态资源。在前端开发过程中,我们常常需要使用相对路径来引用其他模块或文件,但...

    1 年前
  • Custom Elements 在框架中的应用

    Custom Elements 是 Web Components 的核心技术之一,通过使用它可以创建自定义的 HTML 元素和组件,可以让开发者轻松地扩展和重用现有的 HTML 标准。

    1 年前
  • ES11 深入 JavaScript 模块加载机制

    JavaScript 的模块化已经成为了前端开发中的核心内容之一。ES6 将其正式纳入标准,通过引入 import 和 export 语法实现了模块化加载功能。在 ES11 中,对于 JavaScri...

    1 年前
  • Node.js 报错 Error: listen EADDRINUSE 如何处理?

    在使用 Node.js 开发 Web 应用时,我们有时会遇到 Error: listen EADDRINUSE 的错误信息。这个错误通常表示端口已被占用,导致当前应用无法启动服务。

    1 年前
  • JavaScript 中如何正确处理函数提升问题

    JavaScript 中的函数提升问题是开发者经常遇到的问题之一,尤其是在多人协作或大型项目中。函数提升是 JavaScript 中独特的特性,可以让你在函数定义之前就可以调用它们。

    1 年前
  • 使用 ESLint 搭建 React 项目,在代码编写过程中早发现早解决问题

    随着前端技术的发展和应用需求的变化,React 已经成为了一个广泛使用的前端框架。然而,大规模项目的开发中不可避免地会出现各种问题,常常需要花费大量时间解决。为了能够提高项目的开发效率,使用 ESLi...

    1 年前
  • 利用 Mocha 和 ZombieJS 进行 Web 应用程序自动化测试

    在现代 Web 开发中,自动化测试是不可或缺的一部分。它可以帮助开发者检查代码是否符合预期,并且避免后续修改造成意外的破坏。本篇文章介绍如何使用 Mocha 和 ZombieJS 进行 Web 应用程...

    1 年前
  • RxJS 实现滚动到底部自动加载更多

    在开发前端应用时,经常需要实现“滚动到底部自动加载更多”的功能。这种功能通常被用于无限滚动列表或分页展示数据的场景中。本文将介绍如何使用 RxJS 来实现这一功能。

    1 年前
  • 在.NET Core中使用RESTful API实现数据分页的解决方案

    简述 RESTful API是一种常用于构建Web服务的软件架构风格,可以通过HTTP协议实现数据传输。数据分页用于分块获取大量数据的需求,通常用于优化前端页面的加载速度,减少后端服务器的压力。

    1 年前
  • 基于 Koa 框架实现 OAuth2.0 授权机制

    OAuth2.0 是一种流行的身份认证和授权协议,它可以用于保护 Web 应用程序和 API。在此文章中,我将展示如何使用 Koa 框架来实现 OAuth2.0 授权机制,以便保护您的应用程序和 AP...

    1 年前
  • 如何使用 Express.js 构建 RESTful Web 服务?

    前言 在 web 应用程序开发中,REST (Representational State Transfer) 风格是一种常见的设计风格。直接面向资源,通过 HTTP 动词 GET、POST、PUT、...

    1 年前
  • 近似值比较和 NaN 处理技巧:ECMAScript 2019 的 Number.isFinite、Number.isNaN、Object.is?

    在 JavaScript 中,处理数字时,在一些情况下可能需要进行近似值比较或者检测 NaN。ECMAScript 2019 引入了新的方法 Number.isFinite、Number.isNaN ...

    1 年前
  • Jest 中实现完成数据 Mock 的方法探究

    在前端测试中,Mock 数据通常是不可或缺的一部分。Jest 作为一个流行的 JavaScript 测试框架,也提供了丰富的 Mock 功能来帮助我们更轻松地对代码进行测试。

    1 年前

相关推荐

    暂无文章