随着 JavaScript 的发展，每年都会有新的 ECMAScript 标准发布。ES8（es2017）引入了一种新的字符串填充方法，可以方便地进行字符串格式化操作，使得代码更加清晰易读。本文将详细介绍这个新特性，并给出一些示例代码，帮助你更好地理解和应用。
字符串填充方法
在 ES8 中，我们可以使用 padStart() 和 padEnd() 方法来填充字符串。这两个方法都接受两个参数：
targetLength：填充后字符串的总长度。padString：用于填充的字符。
其中，padStart() 方法在字符串的开头填充字符，padEnd() 方法在字符串的结尾填充字符。
下面是一个简单的示例，演示如何使用这两个方法：
const str = 'Hello'; console.log(str.padStart(10, '-')); // ---Hello console.log(str.padEnd(10, '-')); // Hello----
在这个示例中，padStart() 和 padEnd() 都将字符串填充到总长度为 10，使用了连字符 - 进行填充。
深入理解填充方法
虽然这两个方法看起来非常简单，但是它们的应用却非常广泛。在实际开发中，我们经常需要对字符串进行格式化操作，例如填充空格、填充 0 等。使用 padStart() 和 padEnd() 方法可以方便地进行这些操作，避免了手动拼接字符串的麻烦。
另外，这两个方法还有一个非常有用的特性：如果填充字符的长度超过了目标长度，它们会自动截取填充字符，保证填充后字符串的长度不会超过目标长度。下面是一个示例：
const str = 'Hello'; console.log(str.padStart(2, '-')); // Hello console.log(str.padEnd(2, '-')); // Hello
在这个示例中，我们将填充后字符串的总长度设置为 2，但是填充字符的长度超过了 2，所以方法会自动截取填充字符，保证填充后字符串的长度不会超过 2。
实际应用示例
下面是一些实际应用示例，演示如何使用 padStart() 和 padEnd() 方法进行字符串格式化操作：
格式化时间
-- -------------------- ---- ------- ----- ---- - --- ------- ----- ---- - ------------------- ----- ----- - ---------------- - ------------------------- ----- ----- --- - ------------------------------------- ----- ----- ---- - -------------------------------------- ----- ----- ------ - ---------------------------------------- ----- ----- ------ - ---------------------------------------- ----- ----- ------------- - ------------------------ ----------------------------- ---------------------------展开代码
在这个示例中，我们使用 padStart() 方法将月、日、时、分、秒格式化为两位数字，然后使用字符串模板将它们组合成一个时间字符串。
补全数字
const number = 123; console.log(number.toString().padStart(5, '0')); // 00123
在这个示例中，我们使用 padStart() 方法将数字格式化为 5 位数字，不足的部分用 0 填充。
总结
ES8 中的 padStart() 和 padEnd() 方法为字符串格式化操作带来了便利，使得代码更加清晰易读。在实际开发中，我们可以使用这两个方法对字符串进行填充操作，避免了手动拼接字符串的麻烦。希望本文能够帮助你更好地理解和应用这个新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65eed7d12b3ccec22f7c8e7d
