现代 CSS

学习JavaScript ES 2017: padStart & padEnd

作者：大漠 日期：2017-08-16 点击：1147
JavaScript
ES2017

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

ES 2017推出padStart和padEnd。学习如何使用他们你可能在三分钟内就能掌握。

String Padding

padStart()和padEnd()方法用来把一个字符串填到另一个字符串，直到结果字符串到达提供的长度。字符串将在必要时会重复。

  • padStart()：从字符串左边开始填充
  • padEnd()： 从字符串右边开始填充

padStart

让我们看一个简单的例子。下面，我们将使用字符串'cat'。如果只有一个参数，结果字符串会添加空字符串进去，让结果字符串的长度达到参数指定的长度；正如你看到的，你也可以提供第二个参数，用来填充到字符串的字符：

'cat'.padStart(5);         // => '  cat'
'cat'.padStart(5, 'a');    // => 'aacat'

下面看到的是一些高级用例。请注意了，如果字符串最初的length大于padStart()的值，则不会有任何东西填充到指定的字符串里：

'cat'.padStart(1, 'a');    // => 'cat'
'cat'.padStart(5, 'abc');  // => 'abcat'
'cat'.padStart(8, 'abc');  // => 'abcabcat'

padStart

padEnd

同样，padEnd()方法和padStart()一样，其唯一区别是字符串被应用到当前字符串的末尾。我们将使用与上面相同的例子来演示padEnd()的结果：

'cat'.padEnd(5);         // => 'cat  '
'cat'.padEnd(5, 'a');    // => 'cataa'

同样的，来看几个高级用例：

'cat'.padEnd(1, 'a');    // => 'cat'
'cat'.padEnd(5, 'abc');  // => 'catab'
'cat'.padEnd(8, 'abc');  // => 'catabcab'

padEnd

用例

这是字符串填充的一个可能的用例，代码如下：

const data = {
    Portland: '78/50',
    Dublin: '88/52',
    Lima: '58/40'
}

Object.entries(data).map(([city, temp]) => {
    console.log(`City: ${city} Weather: ${temp}`)
});

我们有一个具有城市名称和相应天气温度的对象。该对象使用ES 2017的object.entries()。阅读更多关于object.entries()的内容，结果的值被记录到console.log()：

City: Portland Weather: 78/50
City: Dublin Weather: 88/52
City: Lima Weather: 58/40

这样的阅读体验很差，都叠在一起了。通过在代码中添加padEnd()，可以大大增加可读性。新代码如下：

const data = {
    Portland: '78/50',
    Dublin: '88/52',
    Lima: '58/40'
}

Object.entries(data).map(([city, temp]) => {
    console.log(`City: ${city.padEnd(16)} Weather: ${temp}`)
});

通过使用padEnd()，我们可以确保每个日志都是一致的，从而创建一个更好的表格布局：

City: Portland        Weather: 78/50
City: Dublin          Weather: 88/52
City: Lima            Weather: 58/40

注意：在Chrome浏览器直接运行上面的代码，看到的结果并不像我们想像中要的，不知道是不是我使用的姿势不对。不过在Babel在线工具中，输出的结果是我们想要的。

总结

本文主要介绍了有关于JavaScript ES2017有关于字符串填充的padStart()和padEnd()两个方法。这两个方法都可以接受两个参数，第一个参数是指定结果字符串的length，第二个参数是将要给指定字符串中添加的字符。他们都有可能会重复添加。两者不同的是，padStart()是从一个字符串的左边开始填充（前置），padEnd()是从一个字符串的右边开始填充（后置）。

我最近在整理一些有关于JavaScript ES2017的系列教程，如果你感兴趣的话，欢迎持续关注相关更新。

本文根据@Brandon Morelli的《Learn JavaScript ES 2017: String padding — padStart & padEnd》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处://codeburst.io/learn-javascript-es-2017-string-padding-padstart-padend-88e90783e7de。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/learn-javascript-es-2017-string-padding-padstart-padend.htmlFILA Luminous Pack

返回顶部