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 相关文章推荐
jQuery插件 tabBox实现代码
Feb 09 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
使用php来实现网络服务
2009/09/15 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
使用Python对Excel进行读写操作
2017/03/30 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Mac 上切换Python多版本
2017/06/17 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
物流合作计划书
2014/01/10 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB