Javascript補(bǔ)零的用法及實(shí)例分析

在日常的前端開發(fā)中，我們經(jīng)常會(huì)遇到需要處理數(shù)字時(shí)需要將其轉(zhuǎn)換成字符串，但是對(duì)于一些數(shù)字而言補(bǔ)零是非常必要的。那么Javascript中如何實(shí)現(xiàn)數(shù)字補(bǔ)零呢？本篇文章將會(huì)帶大家深入探討。

一、在小于10的數(shù)字前面自動(dòng)補(bǔ)0

有時(shí)我們需要處理一些數(shù)值，例如時(shí)鐘等，需要保持?jǐn)?shù)字的長(zhǎng)度不變，如“09”而不是“9”。此時(shí)我們就需要使用補(bǔ)零功能，對(duì)于小于10的數(shù)字添加前導(dǎo)0。

function addZero(num) {
return num < 10 ? '0' + num : num;
}
console.log(addZero(5)); //輸出 05
console.log(addZero(9)); //輸出 09
console.log(addZero(10)); //輸出 10

二、指定需要補(bǔ)的位數(shù)進(jìn)行補(bǔ)零

有時(shí)候我們需要指定補(bǔ)零的數(shù)量（即補(bǔ)充長(zhǎng)度），例如生成訂單號(hào)，通常會(huì)補(bǔ)足六位。在這種情況下，我們不能直接使用上面的方法。

function zeroPadding(num, length) {
var str = num.toString();
while (str.length < length) {
str = '0' + str;
}
return str;
}
console.log(zeroPadding(8, 4)); //輸出 0008
console.log(zeroPadding(125, 6)); //輸出 000125
console.log(zeroPadding(2000, 3)); //輸出 2000

三、ES6中的簡(jiǎn)單寫法：padStart()

在ES6中，隨著新特性的出現(xiàn)，我們可以更為方便的實(shí)現(xiàn)補(bǔ)零操作。在這里我將為大家介紹ES6中新增的字符串方法padStart()。

const addZero = (num) => {
return num.toString().padStart(2,'0');
};
console.log(addZero(5)); //輸出 05
console.log(addZero(9)); //輸出 09
console.log(addZero(10)); //輸出 10

可以看到，padStart()方法接收兩個(gè)參數(shù)，其中第一個(gè)參數(shù)是指定需要補(bǔ)充到的總長(zhǎng)度，第二個(gè)是補(bǔ)充的字符。

總結(jié)

在Javascript中實(shí)現(xiàn)數(shù)字的補(bǔ)零，在我們的工作當(dāng)中有著非常重要的應(yīng)用。通過上面的方法，我們可以輕松實(shí)現(xiàn)補(bǔ)零，為各種應(yīng)用提供便捷。