2020-5-29 seo達人
用例
讓我們從介紹幾種不同的填充用例開始。
標簽和值
假設你在同一行上有標簽和值，例如 name：zhangsan 和 Phone Number：（555）-555-1234。如果把他們放在一起看起來會有點奇怪，會是這樣：
Name: zhangsan
Phone Number: (555)-555-1234
你可能想要這個。
Name: zhangsan
Phone Number: (555)555-1234
或這個...
Name: zhangsan
Phone Number: (555)555-1234
金額
在中國，顯示價格時通常顯示兩位數的角、分。所以代替這個...
￥10.1
你會想要這個。
￥10.01
日期
對于日期，日期和月份都需要2位數字。所以代替這個...
2020-5-4
你會想要這個。
2020-05-04
時間
與上面的日期類似，對于計時器，你需要2位數字表示秒，3位數字表示毫秒。所以代替這個...
1:1
你會想要這個。
01:001
padstart()
讓我們從 padStart() 以及標簽和值示例開始。假設我們希望標簽彼此正確對齊，以使值在同一位置開始。
Name: zhangsan
Phone Number: (555)555-1234
由于 Phone Number 是兩個標簽中較長的一個，因此我們要在 Name 標簽的開頭加上空格。為了將來的需要，我們不要把它專門填充到電話號碼的長度，我們把它填充到長一點，比如說20個字符。這樣一來，如果你在未來使用較長的標簽，這一招仍然有效。
在填充之前，這是用于顯示此信息的入門代碼。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現在，讓我們填充第一個標簽。要調用 padStart()，你需要傳遞兩個參數：一個用于填充字符串的目標長度，另一個用于你希望填充的字符。在這種情況下，我們希望長度為20，而填充字符為空格。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);
// Name: zhangsan
////Phone Number: (555)-555-1234
現在填充第二行。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2.padStart(20, " ") + ": " + phoneNumber);
// Name: zhangsan
//// Phone Number: (555)-555-1234
padEnd()
對于相同的標簽和值示例，讓我們更改填充標簽的方式。讓我們將標簽向左對齊，以便在末尾添加填充。
初始代碼
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現在，讓我們填充第一個標簽，與我們之前所做的類似，但有兩個小區別。現在，我們使用 padEnd() 而不是padStart()，并且需要在填充之前將冒號與標簽連接起來，這樣我們就能確保冒號在正確的位置。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現在兩行都已填充。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
數字(價格、日期、計時器等)呢?
padding函數是專門針對字符串而不是數字的，所以，我們需要先將數字轉換為字符串。
價格
讓我們看一下顯示價格的初始代碼。
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1
要填充分，我們需要先將其轉換為字符串，然后調用 padStart() 函數，指定長度為1且填充字符為'0'；
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents.toString().padStart(2,0)); //￥10.01
日期
這是顯示日期的初始代碼。
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
現在要填充，我將在單獨的行上進行填充，以便于閱讀。
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
最后
雖然編寫自己的padding函數并不難，但既然已經內置在JavaScript中，為什么還要自己去做呢？有很多有趣的函數已經內置了。在你自己構建一些東西之前，可能值得先快速搜索一下。