ECMAScript 2018 新特性之 Regex 反向断言

在 ECMAScript 2018 中,新增了一个非常有用的特性:Regex 反向断言。不知道大家是否有对正则表达式(Regex)有所接触,如果没有,那么我简单的介绍一下。正则表达式是一种用于匹配字符串的工具,它可以帮助我们从数据中筛选出我们需要的内容。在日常前端开发中,我们必须要经常用到正则表达式。Regex 反向断言允许我们在匹配字符串时,根据后面的内容选择是否要匹配当前的字符串。这个新特性在一些场景下可以让我们的代码更加简洁,且易于维护。

1. 反向断言是什么?

在了解什么是反向断言之前,我们先来看一下正向断言。

正向断言:

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

以上代码中,我们使用 test() 方法去匹配字符串,如果匹配到了任意数字,那么就会输出“匹配到数字”。正向断言的位置在 (?=) 中,表示断言后面的位置必须要匹配这个表达式,才会符合断言。如果是在否定断言中,那么位置就变成了 (?!=) 。

反向断言的用法和正向断言非常相似,只不过位置是 (?<=) 和 (?<!) 。下面我们就来看一个反向断言的实例。

反向断言:

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

我们在这个表达式中,要匹配的内容是字母,但是字母前面必须是三个数字。(?<=) 表示我们在匹配表达式的时候,必须要满足后面的表达式才行。类似的,如果是否定断言,那么位置则变成了 (?<!) 。

从这个简单的例子可以看到,反向断言的作用就是为了在匹配字符串的时候,依据后面的内容去决定是否需要匹配当前的内容。

2. 如何使用反向断言?

既然我们已经知道什么是反向断言,那么我们就可以开始用它来编写一些实用的代码了。通过反向断言我们可以轻松实现一些常规匹配难以实现的匹配操作。

以电话号码为例,假设我们的电话号码为:(123) 456-7890,现在我们希望匹配到电话号码后面的后缀,需要用到反向断言来实现。

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

在这个例子中,我们使用反向断言来匹配电话号码后面的数字。我们要求在一个匹配中,有以 " - " 符号隔开的 4 或者 5 个数字,然后后面又跟上了一些数字。这些数字就是我们需要的后缀信息。

另一个例子是可以从多个内容中提取出我们所需要的内容,虽然这个例子看上去有些复杂,但是它能让我们更好的理解如何使用反向断言来处理多个不同的内容。

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

这个例子中,我们要从多个内容中提取出在数字后面的字母内容。我们用的是 (.+?) 作为我们的匹配模式,让表达式去匹配任意数目的字符。使用反向断言,方便我们在匹配过程中,选择一些我们需要的内容。通过这种方式,我们可以轻松的从数据中获取到我们想要的内容。

3. 总结

ECMAScript 2018 新增了反向断言的特性,我们可以根据后面的内容选择是否要匹配当前的字符串,让匹配过程更加高效,代码更加简洁易于维护。虽然这个新特性目前的兼容性还不是很好,但是随着技术的不断进步,相信只要我们不断学习,就能够更好的利用这个技术。希望本文能够对大家学习和使用 Regex 反向断言提供一些帮助。

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


猜你喜欢

  • Web Components 与桌面开发技术的比较

    随着互联网的快速发展,前端技术也在不断地推陈出新。Web Components 是近些年来前端技术中备受瞩目的一项技术,它是一种通过自定义元素和 Shadow DOM、HTML Templates 及...

    1 年前
  • Kubernetes 监控 dataloop 的部署方法

    前言 随着互联网技术的迅速发展,应用的复杂度和规模也不断增加,如何有效地对应用进行监控和管理成为了企业级应用开发的重要任务。Kubernetes 作为当下最流行的容器编排平台之一,提供了对容器应用的高...

    1 年前
  • Docker 容器数据备份和恢复技巧

    前言 Docker 是一个流行的容器化平台,可以简化开发和部署过程。但是在使用 Docker 时,备份和恢复容器中的数据是一个需要谨慎考虑的问题。本文将介绍如何在 Docker 中备份和恢复容器中的数...

    1 年前
  • Koa 框架中 Cookies 的操作方法和最佳实践

    在前端开发中,Cookies (也称为 HTTP Cookies)是一种非常重要的技术,可以在客户端存储少量的数据,用于在多个请求之间共享数据和保持会话状态。Koa 框架是基于 Node.js 的 W...

    1 年前
  • 如何使用 Stub 来 Mock 组件中的 keyDown 事件

    在前端开发中,测试是一个极其重要的环节。其中,Enzyme 是 React 中最受欢迎的测试工具之一。在 Enzyme 中,我们通过 shallow 或 mount 来渲染组件,并使用一系列 API ...

    1 年前
  • Tailwind CSS 如何在响应式布局中使用像素单位?

    Tailwind CSS 是一个流行的前端 CSS 框架,它提供了一系列的基础样式和快速开发工具,让你可以更快地构建响应式的界面。在这篇文章中,我们将重点讨论如何在 Tailwind CSS 中使用像...

    1 年前
  • pm2 配置文件详解

    什么是 pm2? pm2 是一个流行的 Node.js 进程管理工具,可以帮助您管理和监视应用程序的运行。它是基于 Node.js 开发的,可以以守护进程的方式运行,确保您的应用始终在线。

    1 年前
  • Angular 中如何实现权限控制

    在前端开发中,经常会用到权限控制,例如:当用户没有登录时禁止访问某些页面,当用户没有某个角色时禁止某些操作等等。针对这种情况,Angular 提供了一系列的权限控制方式。

    1 年前
  • 如何在 Deno 应用中使用 Redis 缓存数据?

    在 Deno 应用中使用 Redis 缓存数据可以大大提升应用的性能和可扩展性。本文将介绍如何在 Deno 应用中使用 Redis 缓存数据,包括安装 Redis、连接 Redis、存储数据和获取数据...

    1 年前
  • 使用 LESS 优化网站的 SEO 效果

    LESS 是一种 CSS 预处理器,它扩展了 CSS 的语法,使得开发者可以使用变量、混合、嵌套等功能,提高了开发效率和代码可维护性。在前端开发中,我们通常使用 LESS 编写 CSS 样式,但你知道...

    1 年前
  • ES6 中的可选链操作符?

    在编写 JavaScript 应用程序时,我们经常会遇到需要检查对象或数组的嵌套属性或元素是否存在的情况。此时,如果使用旧的检查方法,就需要写很多的代码来处理 null 或 undefined 的情况...

    1 年前
  • Jest 如何实现代码覆盖率测试?

    Jest 如何实现代码覆盖率测试? 随着前端开发的日益火热,对代码的测试也变得越来越重要,特别是在团队合作开发时,为了保证代码的质量和可维护性,在代码提交之前需要进行各种测试工作,其中之一就是代码覆盖...

    1 年前
  • 在 MongoDB 中使用 TTL 索引来自动删除过期数据

    在实际的应用场景中,我们可能需要在 MongoDB 中存储一些过期数据。比如,我们可能需要在数据库中存储一些日志,这些日志会随着时间推移而失效。为了避免这些失效的日志占用大量存储空间,我们需要使用过期...

    1 年前
  • CSS 响应式设计中的长宽最佳实践

    随着移动设备的普及和屏幕尺寸的不断增加,CSS 响应式设计已经成为了前端开发中的重要概念。在设计响应式页面时,长宽的设置是非常关键的一环。在本文中,我们将介绍 CSS 响应式设计中长宽的最佳实践,包括...

    1 年前
  • Mocha 测试框架如何支持动态测试

    Mocha 测试框架如何支持动态测试 在前端开发中,使用 Mocha 完成单元测试是非常常见的选择。Mocha 提供了丰富的断言方法和测试组织方式,使得我们可以灵活地编写测试代码。

    1 年前
  • 用 Gatsby.js 和 Prismic 打造 Headless CMS 网站:提升 SEO 与用户体验

    前言 在 Web 开发领域,内容管理系统(CMS)一直是一个热门话题。基于 CMS 也出现了很多的商业解决方案,如 WordPress、Drupal、Joomla 等,但它们存在一些缺陷: 因为有很...

    1 年前
  • Cypress 测试如何使用数据驱动进行批量测试

    随着网站和应用程序越来越复杂,测试也变得更加重要。而 Cypress 是一个快速且易于使用的前端测试工具,可以帮助开发人员快速测试其应用程序。本文将介绍如何使用数据驱动方式在 Cypress 中进行批...

    1 年前
  • SSE 的优缺点及在项目中的实际应用

    Server-Sent Events (SSE) 是一种用于实现服务器与客户端之间实时通信的技术。它是基于 HTTP 协议的一种类似于长轮询(long-polling)的技术。

    1 年前
  • ECMAScript 2017 中的 Proxy:如何使用

    Proxy 是 ECMAScript 6 中引入的一项新特性,它允许你在对象上设置一个“代理”,从而可以对对象的访问进行拦截和控制。在 ECMAScript 2017 中,Proxy 又得到了进一步增...

    1 年前
  • Babel 中的 Polyfill 实现原理以及实际应用场景

    Babel 中的 Polyfill 实现原理以及实际应用场景 什么是 Polyfill? Polyfill 是一个术语,指的是用来在旧版浏览器上模拟新的 API 的代码。

    1 年前

相关推荐

    暂无文章