【JavaScript】字符串01 - padStart() 和 padEnd()

news/2024/9/12 16:46:36/文章来源:https://www.cnblogs.com/johnny-yan/p/18371415

在 JavaScript 中,我们可以使用 padStart() 和 padEnd() 方法来完成字符串补全。下面给大家介绍一下这两个方法的使用。

  • padStart() 方法用于在当前字符串的前面填充指定的字符,直到字符串的长度达到指定的长度。
  • padEnd() 方法用于在当前字符串的后面填充指定的字符,直到字符串的长度达到指定的长度。
语法:
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
接受两个参数:
  • targetLength 是填充后的结果字符串的长度。
  • padString 是一个可选参数,用于填充字符串,此参数的默认值为" "。
返回值:

在原字符串开头或末尾填充指定的填充字符串直到目标长度所形成的新字符串。
如果 targetLength 小于当前字符串的长度,则字符串补全不生效,返回当前字符串本身。

'abc'.padStart(1, 'd');       // "abc"
'abc'.padEnd(1, 'd');         // "abc"

如果 targetLength 小于用来填充的字符串长度与原字符串的长度之和,则截掉超出位数的补全字符串。

'abc'.padStart(6, '123456'); // "123abc"
'abc'.padEnd(6, '123456');   // "abc123"

如果省略第二个参数 padString,即使用空格补全长度。

'abc'.padStart(6);          // "   abc"
'abc'.padEnd(6);            // "abc   "
应用:
  • 用的比较多的就是时间或者日期前面的补 0,如格式化日期时,我们多采用 4-2-2 的表示形式:
function formatDate(date) {const d = new Date(date); // 必须是可被new Date() 解析的格式const year = d.getFullYear();const month = d.getMonth() + 1;const day = d.getDate();return [year, month, day].map(formatNumber).join('-');
}function formatNumber(n) {n = n.toString();return n[1] ? n : n.padStart(2, '0');
}

到此,关于 JS 字符串补全方法 padStart() 和 padEnd() 的使用就介绍到这里了,希望对大家有所帮助。如有疑问,欢迎留言交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/785140.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

042、Vue3+TypeScript基础,pinia库存储数据修改的两种方式

01、main.ts代码如下:// 引入createApp用于创建Vue实例 import {createApp} from vue // 引入App.vue根组件 import App from ./App.vue//第一步:引入pinia import {createPinia} from piniaconst app = createApp(App);//第二步:创建pinia实例 const pinia = createPinia()…

极客少年旅游回忆录

Day 0 “意外惊喜”原本8:20的飞机直接给我干到8:05起飞,抵达成都天府机场大概在9:35。——哥们太早了,我们在成都租的车还没有及时赶到! 于是,我们等到10:10,驾驶着川 G的车在高速公路上行驶,我特别感慨:大城市的车真的好多!(不怕被超速了哈哈) 待 1h 之后,成功入住…

[vue3] vue3更新组件流程与diff算法

Vue3 中的 patch 函数结合 diff 算法,通过比较新旧 vnode 序列,优化组件更新流程。diff 算法复用旧节点并最小化移动操作,利用最长递增子序列算法提升渲染性能,可以有效减少创建和销毁节点的开销。在Vue3中,组件的更新通过patch函数进行处理。 patch函数源码位置:core/pa…

DDD的函数式编程实现

DDD是一种成熟的软件设计方法,旨在确保领域专家和开发人员能够有效合作,创造出高质量的软件。 本文介绍咋将FP(函数式编程)应用于DDD的实现,使其既优雅又简洁。C4模型中,软件架构图分为四个层次:“系统上下文”、“容器”、“组件”和“代码”。 “组件”是构成容器的基…

使用FModel提取黑神话悟空的资产

介绍使用FModel提取黑神话悟空资产的方法目录前言设置效果展示闲聊可能遇到的问题没有相应的UE引擎版本选项 前言 黑神话悟空昨天上线了,解个包looklook。本文内容比较简洁,仅介绍解包黑神话所需的专项配置,关于FModel的基础使用流程,请见《使用FModel提取UE4/5游戏资产》 …

rust库-ouroboros中文文档

文档原文:https://docs.rs/ouroboros/latest/ouroboros/attr.self_referencing.html 属性宏ouroboros::self_referencing #[self_referencing]此宏用于将常规结构转换为自引用结构。举个例子: use ouroboros::self_referencing;#[self_referencing] struct MyStruct {int_dat…

mini-lsm通关笔记Week1Day4

项目地址:https://github.com/skyzh/mini-lsm 个人实现地址:https://gitee.com/cnyuyang/mini-lsmTask 1-SST Builder在此任务中,您需要修改: src/table/builder.rs src/table.rs SST由存储在磁盘上的数据块和索引块组成。通常,数据块都是懒加载的-直到用户发出请求,它们…

高效流程办公,相信自定义流程表单开发

对于自定义流程表单开发的优势特点,可以在本文中获得详细答案。如果要将企业内部的数据做好高效管理,需要借助更优质的软件平台。低代码技术平台够灵活、更高效、易维护、可视化操作等,可以满足日益扩大的业务需求,助力企业做好数据资源管理,共同为实现流程化办公和数字化…

041、Vue3+TypeScript基础,使用pinia库来储存数据

01、输入npm install pinia 02、main.js代码如下:// 引入createApp用于创建Vue实例 import {createApp} from vue // 引入App.vue根组件 import App from ./App.vue//第一步:引入pinia import {createPinia} from piniaconst app = createApp(App);//第二步:创建pinia实例 c…

三维几何生成:多段线、圆弧

一、三维空间多段线几何 1 应用背景 ​​  opengl常用glLineWidth命令设置线宽,此线宽在透视投影中不会随着相机远近变化而缩放。项目中高版本glLineWidth命令失效,需要考虑如何快速、方便、宽度不变的多段线几何。方案a:纯shader绘制曲线,绘制到一个二维平面上,然后将平…

本地快速安装运行史上最强开源LLaMa3大模型

https://liaoxuefeng.com/blogs/all/2024-05-06-llama3/史上最强开源AI大模型——Meta的LLaMa3一经发布,各项指标全面逼近GPT-4。它提供了8B和70B两个版本,8B版本最低仅需4G显存即可运行,可以说是迄今为止能在本地运行的最强LLM。 虽然LLaMa3对中文支持不算好,但HuggingFac…

第二章 redis环境安装与配置

redis环境安装 redis的官方只提供了linux版本的redis,window系统的redis是微软团队根据官方的linux版本高仿的。 官方原版: https://redis.io/ 中文官网:http://www.redis.cn 1、下载和安装 下载地址:https://github.com/tporadowski/redis/releases使用以下命令启动redis服务…