JS中的字符串前后补全(补位)

在日常项目中经常会遇到需要对字符串补位的操作,比如

  • 向前补0:例如日期,经常会需要YYYY-MM-DD 的格式,
    如果不使用日期库,直接获取月份和日期前面是没有0的,需要手动拼接字符串。

正巧今天要搞日历组件,前面缺一个0总感觉少了点感觉,当时懒得自己写补全了,想着百度一个吧,就搜到了张鑫旭大佬的这篇文章 《JS字符串补全方法padStart()和padEnd()简介》,然后就惊了,原来早在4年前 JS 就原生支持了全后补全了(我这几年在干嘛😢)


# String.padStart()

如果是以前的话我们就会,先判断一下是参否入小于10,然后再去补全字符串 "0",而现在就不需要了直接用 .padStart() 就行,他会自己判断输入的字符串长度是否小于指定长度再去补全。
而且用法就很简单啊,如果你要在字符串前面补位像下面这样使用就行了:

let month = new Date().getMonth() + 1
month = String(month).padStart(2, '0') // 其实第二位使用数字 0 也是可以的

console.log(month)
// 06

# String.padEnd()

padStart() 一样,直接这样使用就可以了 '字符串'.padEnd(7,'补全') 就会把字符串补全为 字符串补全补全,其实我一直没想到向后补位的一个具体示例,这边我使用张大佬的例子:

在JS前端我们处理时间戳的时候单位都是ms毫秒,但是,后端同学返回的时间戳则不一样是毫秒,可能只有10位,以s秒为单位。所以,我们在前端处理这个时间戳的时候,保险起见,要先做一个13位的补全,保证单位是毫秒。使用示意:

timestamp = +String(timestamp).padEnd(13, '0');

关于兼容性 😫

作为一个ES2017(ES8) 的内容,兼容IE肯定是不用考虑的,其它现代浏览器都是支持 padStartpadEnd 的。
如果一定要考虑兼容性问题的话,可以使用 lodash 库中的 _.padStart_.padEnd 来实现前后补全,一直可以兼容到IE9。当然也可以和张大佬一样使用垫片(polyfill)来实现,可以兼容到更低版本的IE


📚 参考文档:

String.prototype.padStart() - JavaScript | MDN
String.prototype.padEnd() - JavaScript | MDN

JS字符串补全方法padStart()和padEnd()简介 « 张鑫旭-鑫空间-鑫生活