唯品秀前端博客
当前位置: 前端开发 > JavaScript > Es6中padStart()、padEnd()字符串补位方法

Es6中padStart()、padEnd()字符串补位方法

2019-08-14 分类:JavaScript 作者:管理员 阅读(84)

这个东西还是蛮实用的,无意中看到的,特此分享一波,还记得那些年我们时间戳转换时间格式时候,时分秒不足2位的单独去写个补位方法吗?有了今天说的这个东西,你又可以少写几行代码了,没错,这东西就是用来字符串补位。

ES6 引入了字符串补全长度的功能,如果某个字符串不够指定长度,会在头部活尾部补全。padStart() 用于头部补全;padEnd() 用于尾部补全,下面上代码看看它的基本特性。

不足指定位数就补全

1
2
3
4
5
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
 
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码,padStart 和 padEnd接受2个参数,第一个参数就是要把字符串弄到几位,第二个参数是用什么字符串去补位。

如果补位字符串比所需要的位数大

1
2
'abc'.padStart(5, '123')  // 12abc
'abc'.padEnd(5, '123') // abc12

原始字符串位数足够,直接返回

1
2
xxx'.padStart(2, 'ab') // 'xxx'
'
xxx'.padEnd(2, 'ab') // 'xxx'

第二个参数补位字符串为空

1
2
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x    '

浏览器兼容性

小结

这玩意儿还是挺方便的,写出来给人感觉清晰明朗,可阅读性高,大家在项目中遇到类似场景可以去使用感受下。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Es6中padStart()、padEnd()字符串补位方法

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 231 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 846 条
  • 链接总数: 12 个
  • 标签总数: 416 个
  • 建站时间: 980 天
  • 注册用户: 1856 人
  • 访问总量: 8652672 次
  • 最近更新: 2019年8月22日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线