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

本文为 《JavaScript 新书:探索 ES2016 与 ES2017》的内容章节,你可以点击链接查看完整目录。

概述:
    ECMAScript 2017 有两个新的字符串方法:
    JavaScript 代码:
    > 'x'.padStart(5, 'ab') // 'ababx'
    > 'x'.padEnd(5, 'ab')   //'xabab'
为什么要填充字符串?
    填充字符串的用例包括:
    1)以等宽字体显示平整的数据。
    2)在文件名或URL中添加计数或ID:’file 001.txt’。
    3)对齐控制台输出: ‘Test 001: ?’。
    4)打印具有固定位数的十六进制或二进制数字:’0x00FF’。
String.prototype.padStart(maxLength, fillString='')
    该方法是在字符串前使用 fillString 填充,直到字符串长度为 maxLength :
JavaScript 代码:
    > 'x'.padStart(5, 'ab')   // 'ababx'
    如果有需要,使用fillString的片段,以便使结果长度正好是 maxLength :
JavaScript 代码:
     > 'x'.padStart(4, 'ab')  // 'abax'
    如果接收字符串的长度大于等于 maxLength ,则返回原始字符串:
JavaScript 代码:
    > 'abcd'.padStart(2, '#') // 'abcd'
    如果 maxLength 和 fillString.length 相同,则会截取 fillString 的前面部分,使返回字符串长度为 maxLength :
JavaScript 代码:
    > 'abc'.padStart(10, '0123456789')  //  '0123456abc'
    如果省略了 fillString ,则使用一个单独空格字符串(' ')代替:
JavaScript 代码:
        > 'x'.padStart(3) //  '  x'
 padStart() 的简单实现
    以下实现可以大概了解 padStart() 是如何工作的,但并不完全符合规范(对于一些边缘情况)。
JavaScript 代码:
        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 ,而是将其插入到字符串结束的地方:
JavaScript 代码:
    > '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() 的实现只是最后一行是不同:
JavaScript 代码:
        return str + truncatedStringFiller;
常见问题:padStart 和 padEnd
    为什么这两个填充方法不叫做 padLeft 和 padRight ?
对于双向或从右到左的语言, left 和 right 这两个词显然容易混淆。因此,padStart 和 padEnd 的命名遵循了现有的 startsWith 和 endsWith 名称。
shim
    为了兼容那些原生不支持 String.prototype.padStart 和 String.prototype.padEnd 方法的旧环境,你可以在 es-shims/String.prototype.padStart 和 es-shims/String.prototype.padEnd找到一些解决方案。
原文链接:http://exploringjs.com/es2016-es2017/ch_string-padding.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值