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

 更新时间:2020年05月27日 15:17:31   作者:sugar_coffee  
这篇文章主要介绍了JS字符串补全方法padStart()和padEnd(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

这个方法无意中看到的,感觉还是蛮实用的,特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候,时间或日期不足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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • PHP abstract与interface之间的区别

    PHP abstract与interface之间的区别

    本文是对PHP中abstract与interface之间的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • javascript 延迟加载技术(lazyload)简单实现

    javascript 延迟加载技术(lazyload)简单实现

    延迟加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.
    2011-01-01
  • 基于JavaScript实现图片连播和联级菜单实例代码

    基于JavaScript实现图片连播和联级菜单实例代码

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • js中的 || 与 && 运算符详解

    js中的 || 与 && 运算符详解

    这篇文章主要介绍了js中的 || 与 && 运算符详解,需要的朋友可以参考下
    2018-05-05
  • 微信小程序实现聊天室

    微信小程序实现聊天室

    这篇文章主要为大家详细介绍了微信小程序实现聊天室,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS中BOM相关知识点总结(必看篇)

    JS中BOM相关知识点总结(必看篇)

    下面小编就为大家带来一篇JS中BOM相关知识点总结(必看篇)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • 微信小程序checkbox组件使用详解

    微信小程序checkbox组件使用详解

    这篇文章主要介绍了微信小程序checkbox组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 微信小程序canvas绘制圆角base64图片的实现

    微信小程序canvas绘制圆角base64图片的实现

    这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js实现窗口全屏示例详解

    js实现窗口全屏示例详解

    这篇文章主要为大家详细介绍了js实现窗口全屏示例,包含全屏事件、退出全屏事件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 微信小程序实现小型计算器

    微信小程序实现小型计算器

    这篇文章主要为大家详细
    介绍了微信小程序实现小型计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09

最新评论