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

算法云栖鹤
• 阅读 1846

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

  • 向前补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()简介 « 张鑫旭-鑫空间-鑫生活

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
Jacquelyn38 Jacquelyn38
4年前
你肯定会用到的CSS多行多列布局
前言:因为项目中使用flex过程中,如果采用spacebetween两端对齐,会遇到最后一行难以对齐的问题。本文主要对多行多列这种常见的布局,列出解决方案,方便大家日常开发使用。话不多说,直接进入正题:方案一:标签补位我们都知道,之所以对不齐是因为最后一行的子项目没有达到4个,spacebetween的对齐方式,自然会把中间空出来。既然如此,何不直接补
Wesley13 Wesley13
4年前
%02x与%2x之间的区别
输出最小宽度用十进制整数来表示输出的最少位数。若实际位数多于定义的宽度,则按实际位数输出,若实际位数少于定义的宽度则补以空格或0(当最小宽度数值以0开头时)。X表示以十六进制形式输出02表示不足两位,前面补0输出;如果超过两位,则实际输出举例:printf("%02X",0x345);//打印出:345pri
Stella981 Stella981
4年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
4年前
Java 位运算(移位、位与、或、异或、非)
//1、左移(<<)//00000000000000000000000000000101然后左移2位后,低位补0:////00000000000000000000000000010100换算成10进制为20System.out.println(5<<2);//运行结果是20//2、右移
Wesley13 Wesley13
4年前
JS一个算法题
题目:实现超出整数存储范围的两个大整数想加function(a,b)。注意:参数a和b以及函数返回值都是字符串。目的:考算法,基本逻辑。我实现的基本思路是:①两个数字字符串长度补成一样,用字符串'0’补位,比如a'1111',b'22',b用'0'补位成'0022'.②分3中情况处理,初始值的长度比较,,a的长度大于b的长度,b的长
Stella981 Stella981
4年前
JavaScript常用函数
1\.字符串长度截取functioncutstr(str,len){vartemp,icount0,patrn/^\x00\xff/,strre"";for(vari