在前端开发中，我们经常需要对数字进行格式化处理，其中一种常见的需求就是用前导零来填充一个值。比如说，在时间显示时，将小时数 3 显示为 03，这样可以保证时间的格式更加统一和规范。
方案一：使用 padStart 方法
ES6 中新增了字符串方法 padStart()，可以实现用指定字符填充一个字符串到指定长度。我们可以使用该方法将一个数字转换为字符串并填充前导零。下面是一个示例代码：
const hour = 3; const formattedHour = String(hour).padStart(2, '0'); console.log(formattedHour); // 输出 03
以上代码中，String(hour) 将小时数转换为字符串类型，然后使用 padStart() 方法将其填充到长度为 2，不足部分用字符 '0' 填充。
方案二：手动实现填充
如果你的项目不支持 ES6 的 padStart() 方法，或者想要手动实现填充过程，也可以通过以下代码实现：
-- -------------------- ---- -------
-------- -------------- ------- -
--- --- - ---------------
----- ----------- - ------- -
--- - --- - ----
-
------ ----
-
----- ---- - --
----- ------------- - --------------- ---
--------------------------- -- -- --以上代码中，padNumber() 函数接收两个参数，分别是要进行填充的数字和填充后的长度。函数内部先将数字转换为字符串类型，然后使用 while 循环在字符串前面添加字符 '0' 直到达到指定的长度。
总结
本文介绍了两种实现用前导零填充一个值的方案，其中 ES6 的 padStart() 方法更加简单和易读，而手动实现填充则更加通用且适用于低版本的 JavaScript 环境。通过学习本文，你可以掌握一种常见的前端格式化技巧，并且能够根据项目需要选择合适的方式来实现填充操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8690