DDR爱好者之家

JS字符串补全方法padStart()和padEnd()
站长资源 2024/11/24 佚名
76 1538
DDR爱好者之家 Design By 杰米

这个方法无意中看到的，感觉还是蛮实用的，特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候，时间或日期不足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')
"_blank" href="// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js" rel="external nofollow" >查看 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 = targetLength0; //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);
    }
  };
}
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米