在开发前端应用程序时，开发人员遇到的一个普遍问题是格式化数字和字符串。特别是在处理日期和时间时，我们需要将它们格式化为特定的字符串格式。有时，我们需要将数字填充为特定的长度，以便样式和对齐等方面更好地呈现。在这种情况下，开发人员往往需要手动处理这些操作，这可能使代码变得复杂和容易出错。
幸运的是，在 ES8 中，我们有了 String.prototype.padStart 和 String.prototype.padEnd 这两个内置方法。它们可以使开发人员更轻松地格式化字符串并在需要时填充字符。
padStart 和 padEnd 方法
padStart 和 padEnd 方法接收两个参数：第一个参数是要填充的新长度，第二个参数是要填充的字符。如果不指定填充字符，则默认使用空格。
以下是示例代码：
-- -------------------- ---- ------- -- -- -------- ----- ----- ---- - ---- ---- ------------------------------- -- ---- --- --- -- -- ------ ----- ----- ---- - ---- ---- ----------------------------- -- ------- -- - -- ---------------- ----- ---- - ---- ---- ----------------------------- ------ -- ----------- --- --------------------------- ------ -- ------- -------
应用场景
数字补位
在一些场景下，我们需要将数字补到指定的长度。例如，在许多电商网站中，我们可以看到产品价格常常铺满整个商场页面，而且价格前面的符号保持对齐。通常，我们使用 padStart 方法来达到这个效果。
下面代码演示了如何将数字补位到指定长度：
const price = 9.99; const priceStr = price.toFixed(2); console.log(priceStr.padStart(10)); // 输出：' 9.99'
生成标准时间格式
使用 padStart 和 padEnd 方法可以非常容易地生成标准时间格式。例如，我们希望生成 24 小时制的时间格式，并且将各部分填充到指定的长度。以下是一个示例：
-- -------------------- ---- -------
----- ---- - --- -------
----- ----- - ---------------------------
----- ------- - -----------------------------
----- ------- - -----------------------------
----- ---------- - ----------------- ---- - --- -
------------------- ---- - --- -
------------------- -----
------------------------ -- -------------总结
尽管 padStart 和 padEnd 方法是 ES8 推出的相对较小的功能，但它们可以为开发人员提供极大的便利。这两个方法使得我们可以轻松地格式化数字和字符串，并且在需求变化时保持代码简单和易于维护。使用 padStart 和 padEnd 方法，开发人员可以更快速地生成格式化数据和更美观的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc88bdf6b2d6eab323259a