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 相关文章推荐
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
浅析return false的正确使用
Nov 04 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
Javascript writable特性介绍
Feb 27 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
基于iview的router常用控制方式
May 30 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
js+canvas实现画板功能
Sep 13 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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获取twitter最新消息的方法
2015/04/14 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python获取代理IP的实例分享
2018/05/07 Python
利用Python如何生成便签图片详解
2018/07/09 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
HashMap和Hashtable的区别
2013/05/18 面试题
软件测试企业面试试卷
2016/07/13 面试题
小学教师学期末自我评价
2013/09/25 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
火箭队口号
2014/06/18 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
机关工会工作总结2015
2015/05/26 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL