ES9 新特性:之前看不懂的零宽断言

在 JavaScript 中,正则表达式一直都是一个强大的工具,它能够用来匹配字符串并提取有用的信息。ES9 中引入了一项新的特性——零宽断言,它可以让我们更加准确地进行字符串匹配操作。

什么是零宽断言

在介绍零宽断言之前,我们先来看一下正则表达式中的断言。断言就是一种用来匹配位置的元素,它表示某个位置之前或之后的字符要满足某个条件。

在断言中,我们通常使用字符类、量词、边界等元素来描述条件。比如,我们可以使用 ^$ 来匹配行的开头和结尾,使用 \b 来匹配单词边界等。

而零宽断言则是一种特殊的断言,它虽然不匹配任何实际字符,但却可以用来描述某个位置前或后的条件。零宽断言通常由一对圆括号和一个限定条件组成,限定条件分为正向和负向两种。正向表示该位置前/后的字符必须满足条件才能匹配成功,而负向则表示该位置前/后的字符不能满足条件才能匹配成功。

零宽断言的语法

零宽断言由一对圆括号和一个限定条件组成,限定条件分为正向和负向两种,具体语法如下:

  • (?=pattern): 正向前瞻,表示当前位置后面的字符符合 pattern 才能匹配成功。
  • (?!pattern): 负向前瞻,表示当前位置后面的字符不符合 pattern 才能匹配成功。
  • (?<=pattern): 正向后顾,表示当前位置前面的字符符合 pattern 才能匹配成功。
  • (?<!pattern): 负向后顾,表示当前位置前面的字符不符合 pattern 才能匹配成功。

其中,pattern 是一个正则表达式,表示限定条件。需要注意的是,零宽断言只是描述位置的特性,它并不会匹配实际的字符,因此使用时需要注意。

零宽断言的示例

下面我们来看几个零宽断言的示例,以更好地理解它的用法。

正向前瞻

正向前瞻用于匹配某个位置后面的字符。

比如,我们可以使用正向前瞻来匹配一个字符串中所有以 A 开头的单词:

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

在上面的代码中,我们使用 \bA\w+ 来匹配以 A 开头的单词,然后使用 (?=\s) 来限定后面必须是一个空格符。

负向前瞻

负向前瞻用于匹配某个位置后面不符合条件的字符。

比如,我们可以使用负向前瞻来匹配一个字符串中所有不以 A 开头的单词:

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

在上面的代码中,我们使用 \b\w+ 来匹配所有单词,然后使用 (?!\sA) 来限定后面不能是空格符和 A

正向后顾

正向后顾用于匹配某个位置前面的字符。

比如,我们可以使用正向后顾来匹配一个字符串中所有以 fruit 结尾的单词:

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

在上面的代码中,我们使用 \w+fruit\b 来匹配以 fruit 结尾的单词,然后使用 (?<=\s) 来限定前面必须是一个空格符。

负向后顾

负向后顾用于匹配某个位置前面不符合条件的字符。

比如,我们可以使用负向后顾来匹配一个字符串中所有不以 fruit 结尾的单词:

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

在上面的代码中,我们使用 \b\w+\b 来匹配所有单词,然后使用 (?<!\sfruit) 来限定前面不能是空格符和 fruit

总结

零宽断言是一种特殊的正则表达式断言,它用于描述某个位置前或后的字符是否符合某种条件。使用零宽断言能够让我们更加准确地进行字符串匹配操作,从而提高代码的效率和可读性。

但是,由于零宽断言并不会匹配实际的字符,因此使用时需要特别注意。在实际开发中,建议适当使用零宽断言来提高代码的可维护性和性能。

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


猜你喜欢

  • 如何合理使用 LESS 中的 & 符号

    LESS 是一种基于 CSS 的预处理器,它在 CSS 的基础上提供了扩展语法和更强大的功能,如变量、嵌套、混合、函数等。在 LESS 中,有一种特殊的字符 &amp;,它在嵌套选择器中起着非常重要的...

    1 年前
  • 优化 ESLint 配置,提高代码的可维护性

    引言 在前端开发中,代码的可维护性是一个很重要的因素。然而,由于前端开发的特点,可能会导致一些代码质量问题。例如:代码风格不一致、安全漏洞、性能问题等。这些问题会导致代码的可阅读性和可维护性下降。

    1 年前
  • Cypress 运行测试用例时出现 “Request failed with status code 404” 错误

    问题描述 在使用 Cypress 运行测试用例时,偶尔会出现 “Request failed with status code 404” 错误,如下图所示: 这个问题通常是由于前端应用在加载页面或资...

    1 年前
  • Promise 常用 API 及使用技巧

    在前端开发中,我们常常需要进行一些异步操作,例如发起网络请求、操作 DOM 等。在过去,我们使用回调函数来处理异步操作,但这种方法很容易导致回调地狱,使代码难以理解和维护。

    1 年前
  • 如何基于 Koa 实现 WebSocket 的实时推送

    WebSocket 是一种在单个 TCP 连接上进行全双工通信的标准,允许在一个持久连接上进行实时数据传输,并且可以自定义二进制和文本数据格式。在前端类的应用中,WebSockets 是实现实时推送的...

    1 年前
  • 避免浏览器缺省样式带来的影响:CSS Reset 技巧

    在前端开发中,经常会遇到浏览器缺省样式的影响,例如不同浏览器对于字体大小、行高、间距等的默认设置不同,导致页面显示效果不一致。因此,需要通过一些技巧来避免浏览器缺省样式带来的影响,其中 CSS Res...

    1 年前
  • Babel 编译时如何自定义转换规则

    Babel 是一款非常流行的 JavaScript 编译器,可以使用它将最新的 JavaScript 代码转换成可以在更老的环境中运行的代码。除此以外,Babel 还允许开发者自定义转换规则,从而实现...

    1 年前
  • 解决 GraphQL 中的 N+1 问题

    GraphQL 是一种快速、高效和强大的 API 查询语言,它提供了一种优雅的方式来描述数据的结构。然而,当我们在使用 GraphQL 查询时,我们经常会遇到一个问题——N+1 问题。

    1 年前
  • 解决 RxJS 中订阅泄漏的问题

    在使用 RxJS 进行开发时,订阅泄漏是一个常见的问题。它会导致内存占用过高,造成性能问题。本篇文章将详细介绍订阅泄漏的原因、后果以及如何解决这个问题。 订阅泄漏的原因 RxJS 是一种基于事件流的编...

    1 年前
  • 如何在 Jest 中使用 Enzyme 进行快速的 React 测试

    React 是一个非常流行的前端框架,但在开发过程中,如何快速准确地测试 React 组件成为了困扰很多人的问题。在这篇文章中,我们将介绍如何使用 Jest 和 Enzyme 进行快速的 React ...

    1 年前
  • PWA 技术中的前端性能优化指南

    随着移动互联网的快速发展,越来越多的用户开始使用移动设备来浏览网站和使用 Web 应用程序。然而,由于移动设备的性能和网络带宽限制,网站和应用程序的性能问题也变得越来越突出。

    1 年前
  • 利用 Chai.js 和 Mocha.js 来测试 JavaScript 代码质量

    前言 在编写大型 JavaScript 项目时,代码质量是非常重要的。 代码质量测试可以使代码更健壮、更易维护,同时也能够帮助开发人员明确想要达到的结果。Chai.js 和 Mocha.js 是两个广...

    1 年前
  • 处理 Webpack 错误:"Filename Too Long" 的方法

    Webpack 是一个强大的前端打包工具,它能够有效地整合、压缩并减少前端资源的加载时间。但是,在使用Webpack 的过程中可能会遇到一些错误,如“Filename too long”错误。

    1 年前
  • 解决 Express.js 中的 req.params 返回 undefined 的问题

    在使用 Express.js 构建 Web 应用时,我们经常会用到 req.params 变量来获取路由中的参数。但是有时候,我们会发现该变量返回 undefined。

    1 年前
  • Material Design 下如何实现看板效果

    本文主要介绍如何在 Material Design 中使用 CSS 和 JavaScript 实现看板效果,希望对前端开发者有所帮助。 前置知识 在开始学习如何实现看板效果之前,需要对以下知识有一...

    1 年前
  • TypeScript 中如何正确使用 “never” 数据类型

    在 TypeScript 中,有一种特殊的数据类型叫做 “never”。它表示的是那些永远不会出现的值的类型。具体来说,如果一个函数的返回类型是 “never”,那么它要么永远不会结束执行,要么抛出了...

    1 年前
  • Kubernetes 在阿里云上如何部署与监控?

    Kubernetes 是一个流行的容器编排平台,用于管理和调度分布式应用程序。在阿里云上,可以使用阿里云容器服务 (ACK) 快速部署和管理 Kubernetes 集群。

    1 年前
  • 使用 ES9 中的 Object 与 Symbol 进行更强大的数据控制

    自 ECMAScript 6 (ES6) 发布以来,JavaScript 的语言规范得到了很大的改进,它增加了许多重要的新特性和语法糖。而在 ES9 中,开发人员能够有更多的选择和工具来处理和控制数据...

    1 年前
  • 用 Fastify 打造高性能 Node.js 服务器

    随着互联网的飞速发展,越来越多的企业开始注重前端的发展,而 Node.js 作为一门高效的服务器端开发语言,也变得越来越重要。但是,在 Node.js 开发过程中,一个高性能的服务器是必不可少的。

    1 年前
  • ES12 的 Promise API 改进:使用 transferFrom() 避免额外的复制

    在 JavaScript 中,Promise 是一种处理异步操作的方式,它可以让我们更优雅地处理回调,使代码更易于组织和维护。在 ES6 之后,Promise 成为了 JavaScript 标准的一部...

    1 年前

相关推荐

    暂无文章