ES10 中字符串函数 trimStart 和 trimEnd 使用技巧

在 ES10 之前,为了去除字符串前后的空格,通常需要用到 trim() 函数。但是这个函数只能去除字符串两端的空格,并不能去除其中某一端的空格。为了解决这个问题,ES10 中新增了 trimStart()trimEnd() 函数,分别用于去除字符串的开头和结尾的空格。

基本使用方法

trimStart()trimEnd() 函数的用法非常简单,只需要在字符串对象后直接加上函数名即可。例如:

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

可以看到,trimStart() 函数去除了字符串开头的空格,而 trimEnd() 函数去除了字符串结尾的空格。

指定去除的字符

默认情况下,trimStart()trimEnd() 函数只能去除空格字符。但是,我们也可以指定要去除的字符,例如:

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

我们在函数中加入 * 字符,这样函数就会去除字符串开头或结尾的 * 字符。

实际应用

实际应用中,trimStart()trimEnd() 函数可以用于去除用户输入的字符串中的空格,以及去除字符串中的特定字符。下面我们就来看一个应用实例。

假设我们有一个表单,其中有一个输入框要求用户输入手机号码。但是,由于用户可能会不小心输入了手机号码前后的空格,我们需要使用 trimStart()trimEnd() 函数去除这些空格。同时,为了去除用户输入的手机号码中可能包含的非数字字符,我们也可以在函数中加入这些字符,例如 trimStart('-+'),表示去除字符串开头的 -+ 字符。

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

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

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

在这个实例中,我们使用了 trimStart()trimEnd()replace() 函数,去除了用户输入的手机号码中的空格和非数字字符,并将处理后的手机号码打印到控制台上。

总结

ES10 中新增了 trimStart()trimEnd() 函数,可以方便地去除字符串开头和结尾的空格。同时,我们也可以使用这两个函数去除字符串中的特定字符,例如去除用户输入的手机号码中的非数字字符。在实际使用中,这两个函数可以大大简化我们的代码,提高开发效率。

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


猜你喜欢

  • Enzyme 测试 React 组件中的错误边界

    Enzyme 是一个流行的 JavaScript 测试工具,主要用于测试 React 组件的行为和属性。除了常规的测试,Enzyme 还可以测试 React 组件中的错误边界。

    1 年前
  • Sequelize 连接池配置的注意事项

    Sequelize 是一个 Node.js 的 ORM 框架,支持多种数据库,比如 MySQL、PostgreSQL、SQLite、Microsoft SQL Server 等。

    1 年前
  • Cypress 如何处理图形验证码

    作为现代 Web 应用程序开发的核心技术之一,Cypress 在自动化测试方面提供了一些强大的工具。然而,当我们面对图形验证码时,Cypress 提供的默认方法可能无法正常处理这些验证码,从而导致测试...

    1 年前
  • Angular-UI-Router 详解:从会用到融会贯通

    什么是 Angular-UI-Router Angular-UI-Router 是一个开源的 JavaScript 路由框架,它允许你在 AngularJS 应用中创建复杂的、层级丰富的 UI 状态。

    1 年前
  • Koa2 中文件上传大小限制的解决方案

    前言 Koa2 是一个优秀的 Node.js 框架,它提供了更为简洁易懂的 API,并且采用了一些新的技术,如 async/await 等。在使用 Koa2 进行文件上传时,需要注意到文件大小的限制问...

    1 年前
  • 如何在 Django 中使用 SSE 实现实时通信

    什么是 SSE SSE (Server-Sent Events)),即服务器推送事件,是一种在浏览器与服务器之间推送实时数据的技术。它是一种与 WebSocket 相似的技术,但与 WebSocket...

    1 年前
  • RxJS 的 debounceTime 操作符原理解析

    在前端开发中,RxJS 是一个流行的响应式编程库。RxJS 中的 debounceTime 操作符往往用于限制用户频繁触发一个事件的次数。本文将解析 debounceTime 操作符的原理,帮助开发者...

    1 年前
  • 在 Sass 中怎样处理 CSS3 的渐变效果

    CSS3 的渐变效果是 web 开发中常用的一个功能,它可以让页面元素呈现出流畅的过渡效果,让网站更加美观与生动。在 Sass 中,我们可以使用 mixin 来处理 CSS3 渐变效果,使得我们的代码...

    1 年前
  • LESS 中的伪类选择器详解及示例代码

    前言 LESS 是一种动态样式语言,它扩展了 CSS 语言,使我们可以使用变量、函数、运算符等特性,使得样式表更加灵活,易于维护。在 LESS 中,使用伪类选择器是经常用到的技巧之一。

    1 年前
  • 利用 Swagger 工具实现 RESTful API 文档自动生成

    随着 RESTful API 的广泛应用,对于开发者来说,编写 RESTful API 文档已经成为一项必要的工作。然而,手动编写文档不仅费时费力,而且容易因疏忽而出现错误。

    1 年前
  • Mongoose 中的增删改查查询详解

    前言 Mongoose 是 MongoDB 的一种 Node.js 的 ORM 工具,它可以帮助我们更方便地在 Node.js 项目中操作 MongoDB 数据库。

    1 年前
  • 如何在 Tailwind CSS 中创建自定义下划线样式?

    Tailwind CSS 是一种现代化的 CSS 框架,可以帮助开发者更快捷地构建 UI。但是,尽管 Tailwind CSS 提供了多种类似下划线的样式,但有时候我们还需要自定义一些下划线样式来满足...

    1 年前
  • 如何使用 Node.js 和 Oracle 进行数据库操作

    在前端开发中,许多项目都需要使用数据库进行数据存储和管理。而 Node.js 和 Oracle 是两个非常流行和有用的工具,它们可以很好地协同工作,实现数据库操作的目的。

    1 年前
  • Java 技术中使用 Socket.io 的一种实现方式

    前言 在 Web 开发中,Socket.io 是一个非常流行的实时通信框架,它支持多种平台和语言的实现,提供了很多灵活的配置选项,使得开发者可以快速构建高效、可靠的实时交互系统,因此被广泛应用在实时通...

    1 年前
  • Redis 实现分布式限流的方法与原理

    在高并发场景下,为了保护系统稳定性,我们通常会对请求进行限流。而在分布式系统中,需要将这种限流机制进行扩展,从而使其适用于不同的实例和节点。Redis 是目前比较流行的 NoSQL 数据库之一,支持分...

    1 年前
  • Vue.js 如何在组件中使用指令

    什么是 Vue.js 指令 Vue.js 是一款流行的 JavaScript 框架,它提供了很多内置指令和可以自定义指令。指令是 Vue.js 在模板语法中提供的特殊属性,用于添加 DOM 操作和事件...

    1 年前
  • Material Design 中使用 CheckBox 实现勾选效果

    在前端开发中,实现勾选效果是一个常见的需求。在 Material Design 中,CheckBox 作为勾选的标准元素,为用户提供了一种直观、美观且易于操作的勾选方式。

    1 年前
  • Hadoop 性能优化实战,加速大数据处理

    Hadoop 性能优化实战,加速大数据处理 Hadoop 是处理大数据的最佳选择之一,但是在实际应用中,Hadoop 的性能往往不如预期。本文将介绍 Hadoop 性能优化的实战经验和技巧,帮助开发者...

    1 年前
  • Web Components 中的数据库操作实践

    Web Components 是一种用于构建可重用 Web 应用程序的 API 和编程技术,它可以用于实现自定义元素和 Shadow DOM,使得 Web 应用程序更加灵活和可维护。

    1 年前
  • PWA 实践:缓存策略及其优化

    什么是 PWA? PWA(Progressive Web Apps)指的是渐进式 Web 应用,是一种通过现代 Web 技术提供类似原生应用体验的 Web 应用。PWA 没有应用商店的限制,用户可以直...

    1 年前

相关推荐

    暂无文章