• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

ES2017 中新的字符串方法:padStart 和 padEnd

ES2015(ES6) web前端中文站 2年前 (2017-07-31) 1098次浏览 已收录 0个评论

本章介绍了 ECMAScript 2017 的 String padding 特性 。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

概述

ECMAScript 2017 有两个新的字符串方法:

 > 'x'.padStart(5, 'ab') 'ababx' > 'x'.padEnd(5, 'ab') 'xabab'

为什么要填充字符串?

填充字符串的用例包括:

  • 以等宽字体显示平整的数据。
  • 在文件名或 URL 中添加计数或 ID:’file 001.txt’。
  • 对齐控制台输出: ‘Test 001: ?’。
  • 打印具有固定位数的十六进制或二进制数字:’0x00FF’。

String.prototype.padStart(maxLength, fillString=’ ‘)

该方法是在字符串前使用 fillString 填充,直到字符串长度为 maxLength

 > 'x'.padStart(5, 'ab') 'ababx'

如果有需要,使用fillString的片段,以便使结果长度正好是 maxLength

 > 'x'.padStart(4, 'ab') 'abax'

如果接收字符串的长度大于等于 maxLength ,则返回原始字符串:

 > 'abcd'.padStart(2, '#') 'abcd'

如果 maxLengthfillString.length 相同,则会截取 fillString 的前面部分,使返回字符串长度为 maxLength

 > 'abc'.padStart(10, '0123456789') '0123456abc'

如果省略了 fillString ,则使用一个单独空格字符串(”)代替:

 > 'x'.padStart(3) '  x'

padStart() 的简单实现

以下实现可以大概了解 padStart() 是如何工作的,但并不完全符合规范(对于一些边缘情况)。

 String.prototype.padStart = function (maxLength, fillString=' ') { let str = String(this); if (str.length >= maxLength) { return str; } fillString = String(fillString); if (fillString.length === 0) { fillString = ' '; } let fillLen = maxLength - str.length; let timesToRepeat = Math.ceil(fillLen / fillString.length); let truncatedStringFiller = fillString .repeat(timesToRepeat) .slice(0, fillLen); return truncatedStringFiller + str; };

String.prototype.padEnd(maxLength, fillString=’ ‘)

padEnd() 的工作方式与 padStart() 类似,但不是在字符串开始的地方插入重复的 fillString ,而是将其插入到字符串结束的地方:

 > 'x'.padEnd(5, 'ab') 'xabab' > 'x'.padEnd(4, 'ab') 'xaba' > 'abcd'.padEnd(2, '#') 'abcd' > 'abc'.padEnd(10, '0123456789') 'abc0123456' > 'x'.padEnd(3) 'x  '

padStart() 的实现相比,padEnd() 的实现只是最后一行是不同:

 return str + truncatedStringFiller;

常见问题:padStart 和 padEnd

  • 为什么这两个填充方法不叫做 padLeft 和 padRight ?

对于双向或从右到左的语言, leftright 这两个词显然容易混淆。因此,padStartpadEnd 的命名遵循了现有的 startsWithendsWith 名称。

shim

为了兼容那些原生不支持 String.prototype.padStartString.prototype.padEnd 方法的旧环境,你可以在 es-shims/String.prototype.padStart 和 es-shims/String.prototype.padEnd 找到一些解决方案。

原文链接:http://exploringjs.com/es2016-es2017/ch_string-padding.html

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ES2017 中新的字符串方法:padStart 和 padEnd
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址