JavaScript 小技巧：數字字串補零時超好用的原生方法 - padStart

今天我想跟大家分享一個數字字串補零時超好用的原生方法： padStart;

當然所謂的「數字字串補零時超好用的原生方法」這件事情是我自己覺得最適合用它的應用場景，而如果你有想到更適合的應用場景也拜託請跟我分享！！

假設我們今天收到需求是不管是 0~999 之間的任何一個數字，都要以三位數的形式顯示給使用者看。例如：

1. 如果資料是 9 的話，要顯示 009
2. 如果資料是 99 ，要顯示 099
3. 如果是 999 ，就顯示 999。

所以，以前的我們大概會這樣寫：

1
2
3
4
5
6
7
8
9

// 隨機產生一個 0~999 的數字
const randomNum = Number((Math.random() * 1000).toFixed());

let numString = `${randomNum}`;
if (randomNum < 10) {
  numString = `00${randomNum}`;
} else if (randomNum < 100) {
  numString = `0${randomNum}`;
}

如果今天需求是需要一個超長的位數的話，那就會有很多個 if/else ，看起來是不是很笨？！是不是很醜？！

但有了 padStart 之後，我們只要這樣寫：

1

const num = (Math.random() * 1000).toFixed().padStart(3, "0");

一行就解決了，是不是超讚的？！！！

不管需求要幾位數，都只要改那個 3 就好，而如果不想補 "0" ，想補 "*" 也沒問題，把 "0" 改成 "*" 就好，方便的不得了！！

而這個方法在各大瀏覽器的支援程度高達 95.72% ，所以各位可以放心使用！！

如果你還要支援 IE 的話就抱歉了XD

同場加映

聰明的你一定會想，既然有 padStart ，那是不是也有 padEnd ？

沒錯，其使用的方式一模一樣，只是改為在後面補上你想要補的字而已！！

像是：

1
2
3
4

const name = 'Leo';
const result = name.padEnd(5, "a");

console.log(result); // 'Leoaa'

是不是非常簡單呢？！

今天的 JavaScript 小技巧就到這邊囉，我們下次見，掰掰！

Reference

• Can I use - padStart
• MDN - padStart