js 字符串转long_JS字符串补全方法padStart()和padEnd()简介

阅读本文约需要10分钟

大家好，我是你们的导师，我每天都会给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次给大家分享了浏览器原生支持ES6的 export和import模块，今天跟大家分享一下JS字符串补全方法。

1. 关于字符串补全

在JS中，字符串补全是常用操作，用的比较多的就是时间或者日期前面的补0。例如，日期，我们多采用4-2-2的表示形式，例如：2018-07-23

当我们使用时间戳进行月份获取的时候，是没有前面的0的，例如：

此时，就需要进行补全，通常做法是这样：

甚至会专门定义一个补'0'方法，例如此日期转时间戳微码中的自定义的zero方法。

然而，随着JS字符串补全方法padStart()和padEnd()的出现，类似场景使用就简单多了！

2. 关于padStart

padStart可以在字符串的开头进行字符补全。语法如下：

其中：targetLength (可选)指目标字符串长度。然后，根据我的测试，targetLength参数缺省也不会报错，原本的字符串原封不动返回，不过代码没有任何意义，因此，基本上没有使用的理由。

还有，targetLength参数的类型可以是数值类型或者弱数值类型。在JavaScript中，1 == '1'，1是数值，'1'虽然本质上是字符串，但也可以看成是弱数值。在padStart()方法中，数值类型或者弱数值类型都是可以。

因此，我们实际使用的时候，没必要对targetLength参数进行强制的类型转换。最后，如果targetLength设置的长度比字符串本身还要小，则原本的字符串原封不动返回。

padString (可选)表示用来补全长度的字符串。然而，虽然语义上是字符串，但是根据我的测试，任意类型的值都是可以的。无论是Chrome浏览器还是Firefox浏览器，都会尝试将这个参数转换成字符串进行补全。

回到一开始的日期补'0'功能，有了padStart()方法，我们代码可以简化成下面这一行：

IE14以其已下浏览器都不支持，考虑到现在还是windows 7天下，PC端对外项目还不能直接用；移动端，UC浏览器，QQ浏览器也不支持。但是，也不是不能使用，加一个Polyfill就好了，这个后面会展示。

3. 关于padEnd

padEnd可以在字符串的后面进行字符补全，语法参数等都和padStart类似。语法：

其中：targetLength (可选)指补全后字符串的长度。然后，根据我的测试，targetLength参数如果不设置，不会报错，直接返回原始字符串，不过这样代码就没有任何意义，因此，实际开发，此参数肯定是需要设置的。同样的，targetLength参数的类型可以是数值类型或者弱数值类型。

因此，我们实际写代码的时候，没必要强制targetLength参数为数值。最后，如果targetLength设置的长度比字符串本身还要小，则原字符串原封不动返回。

padString (可选)表示用来补全长度的字符串。虽然语义上是字符串，实际上这个参数可以是各种类型。

4. Polyfill代码

以下Polyfill代码取自polyfill项目中的string.polyfill.js，其中使用依赖的repeat()也是ES6新增方法，因此，完成Polyfill代码如下，注释部分我做了简单的翻译，代码部分简化了些许逻辑，同时，修复了一个bug，下面代码红色高亮部分就是修复内容：

以上polyfill代码需要放在调用padStart()/padEnd()方法的代码的前面，只要在合适的位置就这么一粘贴，然后，无论什么版本浏览器浏览器，哪怕IE6，IE8，我们也可以放心使用padStart()或者padEnd()方法了。

今天就分享到这，今日留言话题：今天的这两个js字符串补全的方法，你们掌握了吗？一起来说说吧，对于有价值的留言，我们都会一一回复的。如果觉得对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。

【我们直招】很苦逼，但工资超级高！