今天我想跟大家分享一個數字字串補零時超好用的原生方法: padStart
;
當然所謂的「數字字串補零時超好用的原生方法」這件事情是我自己覺得最適合用它的應用場景,而如果你有想到更適合的應用場景也拜託請跟我分享!!
假設我們今天收到需求是不管是 0~999 之間的任何一個數字,都要以三位數的形式顯示給使用者看。例如:
- 如果資料是
9
的話,要顯示009
- 如果資料是
99
,要顯示099
- 如果是
999
,就顯示999
。
所以,以前的我們大概會這樣寫:
1 | // 隨機產生一個 0~999 的數字 |
如果今天需求是需要一個超長的位數的話,那就會有很多個 if/else
,看起來是不是很笨?!是不是很醜?!
但有了 padStart
之後,我們只要這樣寫:
1 | const num = (Math.random() * 1000).toFixed().padStart(3, "0"); |
一行就解決了,是不是超讚的?!!!
不管需求要幾位數,都只要改那個 3
就好,而如果不想補 "0"
,想補 "*"
也沒問題,把 "0"
改成 "*"
就好,方便的不得了!!
而這個方法在各大瀏覽器的支援程度高達 95.72%
,所以各位可以放心使用!!
如果你還要支援 IE 的話就抱歉了XD
同場加映
聰明的你一定會想,既然有 padStart
,那是不是也有 padEnd
?
沒錯,其使用的方式一模一樣,只是改為在後面補上你想要補的字而已!!
像是:
1 | const name = 'Leo'; |
是不是非常簡單呢?!
今天的 JavaScript 小技巧就到這邊囉,我們下次見,掰掰!