如何用 JS 將 1,2,3 數字格式化處理成 001,002,003 ? padStart 的實際應用

最近在公司遇到一個這樣的小問題，要將 index 的 1, 2, 3 在前端顯示變成 001, 002, 003，之前我看過有人這樣寫：

<span>
  {index < 100 ? '0' : ''}
  {index < 10 ? '0' : ''}
  {index}
</span>

第一眼看到會有點不確定為什麼要這樣寫，而且未來改動也麻煩，例如現在要變成 3 個 0 就要再增加一行 {index < 1000 ? ‘0‘ : ‘‘}

這個時候就可以使用 padStart() 來幫助我們。

簡單介紹 padStart()

padStart() 是 JavaScript 的一個字串方法，它會在字串的開頭補上我們指定的字，直到這個字串達到指定的長度。語法如下：

str.padStart(targetLength, padString)

• targetLength 是補全後字串的最終長度。
• padString 是用來補全的字串（默認為空格）。

舉例來說：

'a'.padStart(3, 'b'); // bba
'aaa'.padStart(3, 'b') // aaa

第一個 ‘a’ 因為只有一個字，所以會補兩個 ‘b’ 直到長度為 3；而第二個 ‘aaa’ 因為長度已經為 3 了，所以就不會有任何改變。

這個就可以很方便將數字前面補上指定數量的 0 了。像這樣：

const numbers = [1, 2, 3, 11, 12, 13, 101, 102, 103];
const paddedNumbers = numbers.map(num => num.toString().padStart(3, '0'));

console.log(paddedNumbers); 
// ["001", "002", "003", "011", "012", "013", "101", "102", "103"]

只要注意要先將數字轉換成字串就好。

處理案例

所以我們可以很簡單的使用 padStart 來處理上述的案例，像這樣

<span>
  {index.toString().padStart(3, '0')}
</span>

一行就能解決原本三行做到的事情。未來要新增前面補零數量的話，也只要改動第一個參數即可。

<span>
  {index.toString().padStart(5, '0')} 👈 更改前面數字即可
</span>

更多 padStart 的應用場景

所以像日期、序號格式化、倒計時等等一些需要補 0 的場景，這個就很方便了！

日期格式化

例如，在處理日期時，若需要確保月份或日期總是以兩位數表示，可以這樣使用：

let day = "7";
let month = "3";
let formattedDate = `${day.padStart(2, '0')}/${month.padStart(2, '0')}/2024`;
console.log(formattedDate); // "07/03/2024"

發票號碼或訂單序號

或是在系統中需要生成帶有固定位數的發票號碼或訂單號碼，padStart() 可以就保證每個號碼有統一的長度，提升整體的美觀性。

let orderNumber = "123";
let formattedOrderNumber = orderNumber.padStart(6, '0');
console.log(formattedOrderNumber); // "000123"

顯示倒計時

又或是在倒計時應用中，將秒數或分鐘數以兩位數的格式顯示

let seconds = "5";
let formattedSeconds = seconds.padStart(2, '0');
console.log(formattedSeconds); // "05"

總結

總之，padStart() 算是一個實用的工具，在可以快速解決數字格式化場景的問題，支援度也不錯～下次在你的專案用用看吧！

連結參考：

MDN - padStart()

Can I Use? - padStart()