前段时间，我正在用JavaScript构建一个倒计时计时器，我需要格式化我的秒和毫秒。我希望秒的长度总是2数，毫秒的长度总是3位数。换句话说，我希望1秒显示为01,1毫秒显示为001。
俺编写了自己的函数来“填充”这些数字，但是俺发现JavaScript、padStart()和padEnd()中有内置函数来完成这一任务。
在本文中，让我们看看如何在JavaScript中利用这些内置函数。
使用案例
我们首先介绍几个不同的填充用例。
案例一
假设标签和值在同一行，比如姓名:James和电话号码:(555)-555-1234。
如果你把这些不同长度的线叠在一起，看起来会有点奇怪。
Name: James
Phone Number: (555)-555-1234你可能想要的是这样的效果：
Name: James
Phone Number: (555)555-1234或者：
Name: James
Phone Number: (555)555-1234案例二
在显示价格时通常显示两位数的价格。
例如：
$10.1实际上你想要的是这样的结果：
$10.01案例三
对于日期，您希望日期和月份都是两位数。
2020-5-4你想要的可能是这样的结果：
2020-05-04案例四
与上面的日期类似，对于ms计时器，您希望秒为2位数，ms为3位数。
1:1你想要的结果可能是：
01:001padstart()
让我们从padStart()和标签和值示例开始。比方说，我们希望标签右对齐，以便值从相同的位置开始:
Name: James
Phone Number: (555)555-1234由于电话号码是两个标签中较长的一个，所以我们希望在名称标签的开头填充空格。不过为了以后的考虑，我们还是不要将它扩展到电话号码的长度，而是扩展到更长的长度，比如20个字符。这样，如果你以后再用长一点的标签，这个方法仍然有效。
在填充之前，这里是显示此信息的启动代码。
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: James
//Phone Number: (555)-555-1234现在，让我们填充第一个标签。要调用padStart()，需要传递两个参数:一个参数用于填充字符串的目标长度，另一个参数用于填充字符。在本例中，我们希望长度为20，填充字符为空格。实现代码如下：
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);
// Name: James
////Phone Number: (555)-555-1234填充下一行：
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2.padStart(20, " ") + ": " + phoneNumber);
// Name: James
//// Phone Number: (555)-555-1234padEnd()
对于相同的标签和值示例，让我们改变填充标签的方式。让我们将标签向左对齐，这样我们就可以在末尾添加填充。
示例代码：
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: James
//Phone Number: (555)-555-1234现在，让我们填充第一个标签。和我们之前做的一样，有两个小的区别。现在，我们使用的是padEnd()而不是padStart()，我们需要在填充之前将冒号与标签连接起来。这样我们就能确保冒号在正确的位置。
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);
//Name: James
//Phone Number: (555)-555-1234两行都填充：
const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);
//Name: James
//Phone Number: (555)-555-1234其他相关填充
我们还没有指定这一点(尽管可能很明显)，但是填充函数是专门与字符串而不是数字关联的。所以，要填充一个数字，我们需要先把它转换成一个字符串。
案例一
让我们看看用于显示价格的代码。
const dollars = 10;
const cents = 1;
console.log("$" + dollars + "." + cents); //$10.1为了填充价格，我们需要首先将它转换成一个字符串，然后调用padStart()函数，指定长度为1，填充字符为’0′;
const dollars = 10;
const cents = 1;
console.log("$" + dollars + "." + cents.toString().padStart(2,0));案例二
设置显示日期
const month = 2;
const year = 2020;
console.log(year + "-" + month); //2020-2填充月份两位：
const month = 2;
const year = 2020;
console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02案例三
最后是定时器。我们要格式化两个不同的数字，秒和毫秒。同样的原则也适用。
const seconds = 1;
const ms = 1;
console.log(seconds + ":" + ms); //1:1现在需要填充0，使其更加容易阅读：
const seconds = 1;
const formattedSeconds = seconds.toString().padStart(2,0);
const ms = 1;
const formattedMs = ms.toString().padStart(3,0);
console.log(formattedSeconds + ":" + formattedMs); //01:001总结
虽然编写自己的填充函数并不困难，但是为什么要自己编写呢?里面已经内置了非常使用的函数。
