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中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
vue iview实现动态新增和删除
Jun 17 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
多重?l件?合查?(二)
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
JS location几个方法小姐
2008/07/09 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python interpolate插值实例
2020/07/06 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
.net开发工程师面试题
2014/02/25 面试题
临床医学应届生求职信
2013/11/06 职场文书
初中校园之声广播稿
2014/01/15 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
职代会闭幕词
2015/01/28 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL