在 ES6 中，String 对象新增了 padStart 和 padEnd 两个方法，这两个方法用于在字符串的开头或结尾填充一定数量的字符，使得字符串达到指定的长度。这篇文章将深入介绍这两个方法的使用和原理，帮助读者更好地掌握这两个方法。
基本用法
padStart 方法和 padEnd 方法的使用方法基本相同，只是一个是从字符串的开头进行填充，一个是从字符串的结尾进行填充。这里以 padStart 方法为例进行说明。
padStart 方法的基本用法如下：
let str = '123'; let padStartStr = str.padStart(5, '0'); console.log(padStartStr); // 输出：'00123'
上面的代码中，padStart 方法的第一个参数是指定字符串的长度，第二个参数是指定用来填充的字符。可以看到，在字符串 str 的开头加入了两个 0，使得字符串的长度达到 5。
padEnd 方法的使用方法也基本相同，这里就不赘述了。
字符串长度小于指定长度的情况
当字符串长度小于指定长度时，padStart 和 padEnd 方法会自动将指定字符填充到相应的位置上。这里需要注意的是，如果指定的长度小于或等于当前字符串长度，则这两个方法将不会进行填充。
例如，当字符串长度为 3，而指定的长度为 5 时，padStart 方法将自动在字符串开头加入两个指定字符：
let str = '123'; let padStartStr = str.padStart(5, '0'); console.log(padStartStr); // 输出：'00123'
而当指定长度小于或等于字符串长度时，这两个方法将不会进行填充：
let str = '123'; let padStartStr = str.padStart(3, '0'); console.log(padStartStr); // 输出：'123'
省略第二个参数的情况
当省略第二个参数时，padStart 和 padEnd 方法会默认使用空格作为填充字符。例如：
let str = '123'; let padStartStr = str.padStart(5); console.log(padStartStr); // 输出：' 123'
可以看到，padStart 方法默认在字符串开头填充了两个空格，使得字符串的长度达到了 5。
Unicode 字符的问题
当给这两个方法传入的填充字符是 Unicode 字符时，需要注意 Unicode 字符可能占用多个字符位置。例如：
let str = 'a'; let padStartStr = str.padStart(3, '😄'); console.log(padStartStr); // 输出：'😄a'
在上面的代码中，填充字符为 😄，它占用了两个字符位置。因此，padStart 方法只需要再填充一个字符即可使得字符串长度达到 3。
案例分析
接下来我们来看一个实际的案例，它展示了使用 padStart 方法格式化输出时间的方法。
-- -------------------- ---- ------- -------- ---------------- - --- ---- - --- ----------- --- ---- - ------------------- --- ----- - ---------------- - ------------------------- ----- --- --- - ------------------------------------- ----- --- ---- - -------------------------------------- ----- --- ------ - ---------------------------------------- ----- --- ------ - ---------------------------------------- ----- ------ ------------------------ ----------------------------- - --- --- - --- ------- ----------------------------- -- ------- --------------- ----------
在上面的代码中，我们使用 padStart 方法在月、日、时、分、秒的前面都加入了一个 0，保证它们以两位数的形式输出。这样就实现了一个简单的时间格式化函数。
总结
通过本文的介绍，我们可以了解到 padStart 和 padEnd 两个方法的基本用法和注意事项。这两个方法在实际开发中可以用来快速实现一些字符串格式化的需求，如上面的时间格式化案例。当然，在使用这两个方法时，需要根据实际情况进行具体的使用和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fd28b95b1f8cacd75d08e