在 ECMAScript 2017 中，新增了一个很有用的新方法 String.prototype.padStart() ，该方法可以让我们在字符串前面填充指定数量的字符，以便达到指定的长度。该方法可以处理 Unicode 字符串，并且支持使用不同的填充字符。
padStart() 方法的语法
String.prototype.padStart() 方法的语法如下：
str.padStart(targetLength [, padString])
其中：
str：当前字符串对象。targetLength：需要达到的目标长度。如果这个数值小于当前字符串的长度，这个方法将不做任何事情。padString：当当前字符串的长度小于目标长度时，用于填充的字符串。如果省略，则会默认使用空格来填充。
padStart() 方法的基本使用
下面是一个基本的示例，演示了如何使用 padStart() 方法来在字符串前面填充字符，让字符串总长度达到指定的数值：
let strA = 'abc'; let strB = strA.padStart(10, '0'); console.log(strB); // "0000000abc"
上面的示例中， padStart() 方法将字符串 strA 填充了 7 个 0 字符，让它的长度达到了 10。
实际上，我们不必非要使用 0 来填充字符串。在下面的示例中，我们使用 * 来填充一个长度为 6 的字符串：
let strC = 'hello'; let strD = strC.padStart(6, '*'); console.log(strD); // "***hello"
此时， strC 变成了长度为 6 的字符串，并在前面填充了 3 个 *。
另外，如果省略第二个参数， padStart() 方法会默认用空格来填充字符串。
padStart() 方法在处理 Unicode 字符串中的使用
padStart() 方法是面向 Unicode 字符串设计的。在 Unicode 编码中，有一些字符的编码长度是 2 个字节，这意味着这些字符的长度可能会大于 1。在这种情况下，填充字符的数量需要根据编码长度来确定。
这并不是什么麻烦的事情，只需要在第一个参数中指定需要填充的目标长度，而 padStart() 方法会自动计算出需要填充的字符数，并在字符串的前面填充相应的字符。
例如，下面的示例中字符串的长度为 3，但它包含了 2 个镶嵌的 Unicode 字符，因此需要在前面填充 3 个字符才能满足长度：
let strE = '😃'; let strF = strE.padStart(6, '😱'); console.log(strF); // "😱😱😱😃"
在上面的示例中，填充字符串中的 😱 字符实际上是 2 个字符长度（因为它使用了 2 个 Unicode 码点），因此需要填充 3 个 😱 字符才能将字符串的长度填充到 6。
padStart() 方法在日期字符串中的应用
最后，我们来看一个使用 padStart() 方法处理日期字符串的示例。在下面的代码中，我们使用 Date 对象获取当前的月份和年份，并使用 padStart() 方法填充 0 补全数字：
-- -------------------- ---- ------- --- ---- - --- ------- --- ---- - ------------------- --- ----- - --------------- - -- --- ------- - ---------------- --- -------- - ---------------------------- ----- --- ------ - ------------------------- -------------------- -- ---------
在上面的示例中，我们使用了两次 padStart() 方法，一个用于年份，一个用于月份。这样可以确保日期字符串的格式始终如一，并且数字前面补全了 0。
总结
在本文中，我们介绍了 ECMAScript 2017 中新增的 String.prototype.padStart() 方法。我们了解了它的基本用法、Unicode 字符串的支持以及在日期处理中的应用。
该方法非常有用，它可以帮助我们在前端开发中更好地处理复杂的字符串操作，建议在日常开发中采用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518c58f95b1f8cacd10f25a