JS字符串补全方法padStart()和padEnd()


Posted in Javascript onMay 27, 2020

这个方法无意中看到的,感觉还是蛮实用的,特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候,时间或日期不足2位的前面补0。有了今天说的这个东西,就又可以少写几行代码了,大家在项目中遇到类似场景可以去使用感受下。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。

padStart() padEnd() 方法用另一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。
padStart() 从当前字符串的开始(左侧) 位置填充。
padEnd() 从当前字符串的末尾(右侧)开始填充。

语法:

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

padStart() 和 padEnd() 一共接受两个参数,第一个参数 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(10);     // "    abc"
'abc'.padEnd(10);     // "abc    "

如果 padString 长度过长,则会删除后面多出的字符串。

'abc'.padStart(5, "foo");    // "foabc"
'abc'.padEnd(5, "foo");     // "abcfo"

应用:

  • 补全指定位数,如格式化时间或日期时,个位数补0
  • 提示字符串格式 字符串拼接

示例:

当我们使用时间戳并转换成 yyyy-mm-dd hh:mm:ss 的格式。

function dataFormat(data) {
  const dt = new Date(data * 1000) //注:如果是13位时间戳不用*1000 
  
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDay() + '').padStart(2, '0')
​
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
​
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

因着此方法是ES6新增方法,部分浏览器不支持,会有兼容性问题。 查看 Polyfill 创建的String.prototype.padStart() / String.prototype.padEnd() 方法。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
  String.prototype.padEnd = function padEnd(targetLength,padString) {
    targetLength = targetLength>>0; //floor if number or convert non-number to 0;
    padString = String((typeof padString !== 'undefined' ? padString: ''));
    if (this.length > targetLength) {
      return String(this);
    }
    else {
      targetLength = targetLength-this.length;
      if (targetLength > padString.length) {
        padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
      }
      return String(this) + padString.slice(0,targetLength);
    }
  };
}

到此这篇关于JS字符串补全方法padStart()和padEnd()的文章就介绍到这了,更多相关JS padStart() padEnd()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 #Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 #Javascript
使用JavaScript获取Django模板指定键值数据
May 27 #Javascript
基于Vue CSR的微前端实现方案实践
May 27 #Javascript
Node.js API详解之 vm模块用法实例分析
May 27 #Javascript
jQuery实现鼠标滑动切换图片
May 27 #jQuery
js验证账户名是否重复
May 26 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
简单了解python模块概念
2018/01/11 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python装饰器原理与用法深入详解
2019/12/19 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
安全责任书范本
2014/04/15 职场文书
核心价值观演讲稿
2014/05/13 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL