利用es6的padStart()方法和模板字符串对时间填充两位数（补0）

最新推荐文章于 2023-12-04 00:27:25 发布
最新推荐文章于 2023-12-04 00:27:25 发布
阅读量6.4k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： padStart 字符串模板 时间填充
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zxj0904010228/article/details/82859943
本文介绍使用ES6的padStart()方法和字符串模板来简化时间格式化过程，替代传统字符串拼接，提高代码效率及可读性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求：

在js中获取时间的时候往往需要进行格式化且需要对某些时间值进行前面补0的操作，传统方式是字符串拼接，如下：

现在采用es6提供的padStart()方法和字符串模板进行填充：

ES6字符串和数组方法使用
g841805的博客
03-10 1195
方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
ES6新增字符串 数组 对象， 函数方法汇总
weixin_43569862的博客
07-02 465
字符串 String.fromCodePoint() 从 Unicode 码点返回对应字符 String.fromCodePoint(0x20BB7) // "????" 2.String.raw() 转译模板字符串 String.raw`Hi\n${2+3}!` // "Hi\n5!"
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
11-27
如下所示： function formatDate(date,fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length)); } let o = { 'M+':date.getMonth() + 1, 'd+':date.getDate(), 'h+':date.getHours(), 'm+':date.getMinutes(), 's+':date.getSeconds() }; // 遍历这个对象 for(l
ES6中PadStart方法
qq_39239110的博客
03-11 1320
ES6中的字符串新方法padStart()来填充字符串 1.从开始填充： String.Prototype.padStart(maxLength,fillString=’’)//maxLength :填充后的字符串的位数，fillString：填充的字符。 2.从尾部填充：String.prototype.padEnd(maxLength,fillString=’’) ...
ES6 新增 padStart() 方法和 padEnd() 方法
grootbaby
09-25 317
将一个字符串的长度规定，如果达不到这个长度，则向前/后补充一个值 方法 参数 说明 padStart (num, val) 规定一个字符串长度为num，如果长度不够，往前补val（可选） padEnd (num, val) 规定一个字符串长度为num，如果长度不够，往后补val（可选） console.log('123'.padStart(5, '0')) // '00123' console.log('123'.padEnd(5,...
ES6 padStart()方法和padEnd()方法
qq_32184753的博客
03-19 213
padStart() 用于头部补全； padEnd() 用于尾部补全。 举例如下： var aa = "1" aa.padStart(3,0) // 001 aa.padStart(4,'123') // 1231 aa.padEnd(3,0) // 100 aa.padEnd(6,'2') //122222
es6 padStart使用
dupha的博客
03-30 321
padStart方法使用说明 js padStart是什么 padStart() 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。 实例 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0")
js中给不满足位数的数字补0
最新发布
03-08
另外，用户可能想知道有没有更简洁的方式，比如在模板字符串中处理，但本质上还是需要调用上述方法。 需要提醒用户注意，传入的num是否是非数字类型，或者是否需要先转换为数字。但一般情况下，函数内部用String...
JS 生成yyyymmddhhmmss这样的字符串.rar
09-16
此外，还可以使用ES6的模板字符串和`padStart`方法简化代码： ```javascript const now = new Date(); const year = `${now.getFullYear()}`; const month = `${now.getMonth() + 1}`.padStart(2, '0'); const day...
js字符串不足2位填充满
11-01
在JavaScript中，如果你想将字符串填充到固定的长度并不足时在其前面添加特定字符（通常是0），可以使用模板字符串或者`padStart()`函数。以下是两种常见做法： 1. 使用模板字符串 (ES6及以上版本): ```javascript ...
es6中的padStart与padEnd
芝芝龙的博客
07-31 159
padStart与padEnd
es6——padStart和padEnd
肖的博客
09-28 516
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。 console.log('cc'.padStart(2, '123'));//cc console.log('cccc'.padStart(2, '123'))...
ES6新增padStart详细介绍
Crazymryan的博客
04-09 316
概念String.prototype.padStart方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。语法❝...
ES6中padStart()和padEnd()方法的使用
m0_59168984的博客
05-13 1266
ES6中padStart()和padEnd()方法的使用
es6字符串长度补全功能 padStart(), padEnd()
做一个有知识的流氓
02-26 669
如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。如果省略第二个参数，默认使用空格补全长度。
es6的padStart()和padEnd()方法
ljyahaha的博客
03-13 239
之前学习js时，有个返回时间案例，如下获取当前月份的值，我们有个需求，个位数在前面补0 var myDate = new Date(); myDate.getMonth(); //获取当前月份(0-11,0代表1月)获取当前月份是myDate.getMonth()+1; const m=myDate.getMonth()+1; m>9?m:'0' + m//当前三月份 输出03 可知补0要通过语句实现，es6新语句出现后我们可以通过padstart实现。 padStart的作用：如果某个字符串
es6如何使用padStart()和padEnd()方法
前端程序员、项目经理、人工智能博主
12-04 1032
padStart()是在字符串的字符头部增加值,padEnd()是在字符串的字符尾部添加值 这两个方法都是里面有两个参数,第一个参数是字符长度(默认为数值型)，第二个是要添加字符的值(字符串类型)，一般这两个方法常用于日期和计时 详细介绍点击这里 接下来进行两个方法使用 var a1 = '123' console.log(a1.padStart(4,'abc'))//a123 console.log(a1.padStart(6,'abc'))//abc123 console.log(a1
ES6 入门教程 5 字符串的新增方法 5.7 实例方法：padStart()，padEnd() ~ 5.11 实例方法：at()
谢谢你们的关注
11-15 185
ES6 入门教程 5 字符串的新增方法 5.7 实例方法：padStart()，padEnd() ~ 5.11 实例方法：at()
es6学习笔记（1）--字符串的扩展
星辰的笔记
12-19 261
string 1、charAt方法，返回字符串给定位置的字符
掌握ES6模板字符串：结合EJS和Multiline的实现方法
资源摘要信息:"在本篇文章中，我们将深入探讨如何使用ejs和multiline这两个工具来实现ES6中模板字符串的功能。ES6模板字符串是JavaScript中一种强大的字符串处理方式，它允许我们在字符串中嵌入表达式，从而更加方便...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值