為什麼需要字串補零？

在開發網頁時，我們經常會遇到需要格式化文字的情境：

• 製作計時器或電子鐘時，希望把 9 秒顯示成 09 秒。

• 顯示訂單編號時，希望將序號 42 呈現為 00042。

• 顯示信用卡末四碼時，希望前面自動補上星號 **** 1234。

什麼是 String.prototype.padStart()？

當字串長度未達到我們設定的目標長度時，在字串的「開頭（左側）」自動填補指定的字串，直到長度補滿為止。
(補充：如果是想在字串「末尾（右側）」填補，可以使用對應的 padEnd())

語法結構與參數說明

str.padStart(targetLength [, padString])

• targetLength （必填）：填充後希望達到的目標總長度。

• padString （選填）：用來填充的字串。預設值為半形空格 ' '。

const str = '5';

// 目標總長度為 2，不足的部分在左側補 '0'
console.log(str.padStart(2, '0')); // "05"

// 如果沒帶第二個參數，預設會補空白
console.log(str.padStart(3)); // "  5"

留意點

1. 必須是「字串」才能使用

2. 目標長度小於等於原始長度，會原樣回傳
   如果目標長度比原本字串短，padStart() 不會裁切字串，而是直接回傳原本的內容。

   const code = '12345';
   
   // 目標長度設為 3（小於原本的 5）
   console.log(code.padStart(3, '0')); // "12345"（保持原樣，不變動）
   

3. 填補字串超出目標長度時會被截斷
   如果帶入的填補字串太長，只要補滿至目標總長度後，剩餘的填補字串就會被自動截斷。

   const text = 'cat';
   
   // 目標總長度為 6，填補字串為 'abcde'
   console.log(text.padStart(6, 'abcde')); // "abccat" （只補了 "abc"）
   

(參考資料：Mdn - String.prototype.padStart())