您的位置:首页 » 分类: JavaScript & ES2015 (ES6) » 文章: ES2017 中新的字符串方法:padStart 和 padEnd

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

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

概述

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.padStartes-shims/String.prototype.padEnd找到一些解决方案。

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注