了解 ECMAScript 2020 中的子字符串方法 padStart() 和 padEnd()

在前端开发中,我们常常需要对字串进行处理,如字符串补齐等。在 ECMAScript 2020 中,新增加了两种字符串处理方法 padStart() 和 padEnd(),本文将详细介绍这两种方法的使用方法和作用。

padStart()

padStart() 方法返回一个新的字符串,该字符串与其它字符的长度等于给定的长度,且新字符串是由原字符串在开头添加另一字符串而形成的。举一个例子:

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

在这个例子中,padStart() 方法将字符串 str 的长度增加到了 5,然后在该字符串的开头加了两个 0 ,获得了一个新的字符串 newStr 。这种方式非常适用于日前格式化等场景。

另外,我们也可以省略第二个参数,然后默认用空格进行填充:

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

padEnd()

padEnd() 方法返回一个新的字符串,该字符串与其它字符的长度等于给定的长度,且新字符串是由原字符串在结尾添加另一字符串而形成的。与 padStart() 方法 类似,我们同样可以省略第二个参数。

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

在这个例子中,padEnd() 方法将字符串 str 的长度增加到了 5,然后在该字符串的结尾加了两个 0 ,获得了一个新的字符串 newStr 。同样的道理,这种方式也非常适用于日前格式化等场景。

总结

通过个例子,我们了解了 padStart() 和 padEnd() 两种新增加的子字符串方法的用法,它们在一些场景下可以更加方便、简单地迅速生成所需格式的字符串。更多的用法和场景,可根据自己的需求去自由拓展。

附录:完整代码

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

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

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

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


猜你喜欢

  • 如何正确使用 ES7 的 Async/Await

    在前端开发中,异步操作是非常常见的。而在 ES6 中,加入了 Promise,让异步操作的处理更加优雅。但即使使用了 Promise,仍然需要写很多的 Callback 回调函数,代码可读性也并不太好...

    1 年前
  • ECMAScript 2017 中 BigInt 类型的使用

    随着数字技术的不断发展,数字计算的需求也愈发复杂。JavaScript 作为一门支持数字计算的语言,当然也不例外。在 ECMAScript 2017 标准中,新增加了 BigInt 类型,以方便处理超...

    1 年前
  • 前端开发中的 Redux-thunk 异步处理数据

    在前端开发中,管理数据状态是必不可少的一项任务,Redux 是当前最流行的状态管理库之一,而它则有定制的中间件,比如 Redux-thunk,在处理异步数据请求方面表现良好。

    1 年前
  • 使用 Sequelize ORM 连接 MySQL,PostgreSQL 和 SQLite

    简介 Sequelize 是一个基于 Node.js 的 ORM(Object-Relational Mapping)框架,可以帮助我们快速地连接和操作 MySQL、PostgreSQL 和 SQLi...

    1 年前
  • Rxjs 中 takeUntil 操作符及其实现方式

    RxJS 是一个用于把异步数据处理文化的 JavaScript 库,是响应式编程的一种体现。RxJS 自带了各种操作符来处理各种异步数据流,其中 takeUntil 操作符就是其中之一。

    1 年前
  • Webpack Bundle Analyzer 使用方法及优化技巧

    什么是Webpack Bundle Analyzer Webpack Bundle Analyzer是一个可以分析Webpack打包后生成的JavaScript文件的工具,并以可视化的方式展示其包大小...

    1 年前
  • SASS 中的嵌套选择器的最佳实践

    SASS 是一种 CSS 预处理器,它提供了丰富的语法和功能,可以让我们更加快捷、高效地编写 CSS。其中嵌套选择器是 SASS 的一个特性,它可以让我们在编写样式时更加清晰简洁。

    1 年前
  • Chai.js expect 语法中的 `to.be.empty` 和 `to.not.be.empty` 详解

    Chai.js expect 语法中的 to.be.empty 和 to.not.be.empty 详解 Chai.js 是一个非常流行的 JavaScript 断言库,它可以用于编写单元测试和集成测...

    1 年前
  • Next.js 如何管理全局状态?

    在前端开发中,管理全局状态是一个非常重要的任务。随着应用程序的增长,状态管理会变得更加困难,因为需要并行地组织和管理多个状态。对于 React 应用程序,有许多解决方案可以解决这个问题,其中之一是 N...

    1 年前
  • 如何使用 PM2 监控 Node.js 应用的网络流量和延迟

    在 Web 应用开发中,我们经常需要监控我们的应用程序的网络流量和延迟。这对于评估应用性能和优化应用非常重要。在本篇文章中,我们将介绍如何使用 PM2 来监控 Node.js 应用程序的网络流量和延迟...

    1 年前
  • Docker 自动化部署 PostgreSQL

    Docker 是一款基于 Linux 容器的开源应用程序,它可以自动化部署、运行和扩展应用程序。PostgreSQL 是一款流行的关系型数据库,它广泛用于 Web 应用程序的后端数据存储。

    1 年前
  • PWA 优化之缓存数据合理存储

    Progressive Web Apps(PWA)是一种具有应用程序体验的网站。 PWA 可以让用户下载并安装应用程序,但无需像传统应用程序那样在应用程序商店中进行发布和安装,因此它们比原生应用程序更...

    1 年前
  • 在 AngularJS 中使用 ng-repeat 时,如何避免频繁调用 $digest 循环?

    前言 AngularJS 是一个颇受欢迎的前端框架,它提供了一套完整的前端开发解决方案,并且有一个非常强大的数据绑定机制。其中,ng-repeat 指令是常用的数据绑定指令之一,它可以循环遍历一个数组...

    1 年前
  • 无障碍模式下,如何实现翻转屏幕的辅助功能

    我们都知道,现在的手机、平板等移动设备屏幕可以支持翻转,即从垂直方向转为水平方向或者从水平方向转为垂直方向。但对于某些有视觉障碍的用户来说,这样的功能可能存在一些困难,因此需要通过辅助技术来实现屏幕翻...

    1 年前
  • Mongoose 中使用 mongoose-paginate-v2 实现分页和排序

    在进行前端开发中,经常需要通过 API 接口从后台获取数据。而在实际开发中,数据量大的时候,往往需要进行分页和排序操作,以便用户快速访问所需数据。在 Node.js 中,常常使用 Mongoose 作...

    1 年前
  • ECMAScript 2021 (ES12) 中新的 String 方法详解

    随着 JavaScript 的快速发展,ECMAScript 2021(ES12)引入了许多新功能和特性,其中就包括了一些新的 String 方法。这些新的方法为前端开发者提供了更多的选择和灵活性,使...

    1 年前
  • ES2019 之 Optional Catch Binding 的发展历程及运用

    ECMAScript 2019 在功能上具有历史性的更新,为 JavaScript 带来了许多强大的新特性,其中之一就是 Optional Catch Binding。

    1 年前
  • Web Components 是如何优化性能的?

    Web Components 是现代前端开发中使用广泛的一项技术。通过把界面组件化成独立的、可重用的部分,Web Components 能够大幅提升工程师的开发效率。

    1 年前
  • Vue.js:解决使用 $set 和数组 splice 方法响应式数据同步问题的方法

    在 Vue.js 中,我们通常使用 $set 方法或数组的 splice 方法来更新响应式数据。然而,当我们使用这些方法时,有可能会遇到响应式数据同步问题。本文将介绍这个问题出现的原因以及解决方法,并...

    1 年前
  • Koa.js 应用程序中的静态资源处理完整教程

    作为一名前端开发者,我们经常需要处理网站或应用程序中的静态资源,如 HTML、CSS、JavaScript、图片以及其他资源文件。而在 Koa.js 应用程序中,我们需要使用第三方库来处理静态资源。

    1 年前

相关推荐

    暂无文章