hello 大家好，我是一只前端小白，大佬請(qǐng)留言指導(dǎo)。

今天看書看到j(luò)s中將數(shù)字轉(zhuǎn)換為字符串的地方，突然想起一件事，當(dāng)本小白還是超級(jí)小白的時(shí)候，做過(guò)一個(gè)時(shí)間顯示的小案例，當(dāng)時(shí)對(duì)于數(shù)字補(bǔ)白感覺特別詭異，就想，這種東西怎么做啊，上網(wǎng)百度一下看看js中是不是提供了補(bǔ)白的函數(shù)，結(jié)果并沒有找到，當(dāng)時(shí)我的做法特別傻逼

h<10?'0'+h:h;

就類似這樣子寫的，時(shí)分秒都是這樣子，艾瑪，當(dāng)時(shí)都不知道自己封裝個(gè)函數(shù)。
有個(gè)小建議，就是我們平時(shí)練習(xí)或者學(xué)習(xí)時(shí)候，可以自己做個(gè)js文件，將一些實(shí)用的小功能直接封裝到里面。

言歸正傳。

ES7中方法

現(xiàn)在我來(lái)介紹一下JavaScript中的補(bǔ)白方法，js之前雖然沒有提供這樣的方法，但是在ES7中新增的補(bǔ)白的函數(shù)padStart(n,tar) padEnd(n,tar)，我們先來(lái)體驗(yàn)一把：

var res = '1'.padStart(2,'0');
console.log(res);

結(jié)果

這先介紹一下padStart:根據(jù)名字我們就可以知道這是在字符串最前面開始補(bǔ)白，它有兩個(gè)參數(shù)n,tar（這兩個(gè)參數(shù)名字自己亂起的啊，大家可以根據(jù)自己喜好隨便叫）

• n表示我們的預(yù)期有幾位，比如我們上方的例子，我們的預(yù)期是2位，所以會(huì)把1變?yōu)?1
• tar表示我們將使用什么目標(biāo)來(lái)進(jìn)行補(bǔ)白，比如以上的例子，我們使用的是字符'0'來(lái)進(jìn)行補(bǔ)白，當(dāng)然你可以使用別的值來(lái)補(bǔ)白。

padEnd跟padStart的使用方法是一樣的，唯一的區(qū)別就是，它是在結(jié)尾進(jìn)行補(bǔ)白的。

自己的方法

當(dāng)然，有些人擔(dān)心瀏覽器對(duì)ES6之后的新特性支持不好，(不過(guò)目前我電腦的chrome，firefox，Edge，以及QQ瀏覽器都可以直接支持),我還提供一個(gè)自己自己的補(bǔ)白函數(shù),因?yàn)閿?shù)字的補(bǔ)白比較常用所以我就專門是為數(shù)字提供的補(bǔ)白

/**
 * [mypad 我的補(bǔ)白函數(shù)]
 * @param  {[mixed]}  num  [我們補(bǔ)白的目標(biāo)數(shù)字，可以使number和string類型]
 * @param  {[number]}  n    [預(yù)期位數(shù)]
 * @param  {Boolean} flag [是否在開頭補(bǔ)白]
 * @return {[mixed]}       [true|string 如果傳入不是數(shù)字返回false否則返回補(bǔ)白后的結(jié)果]
 */
function mypad(num,n,flag=true){
    // 判斷是否為數(shù)字
    if(typeof Number(num) != 'number'){
        return false;
    }
    // 將數(shù)字轉(zhuǎn)為字符串
    num = num.toString();
    var len = num.length;
    // 如果flag為false則進(jìn)行結(jié)尾補(bǔ)白
    if(!flag){
        if(len>n)
            return num;
        for(var i = 0; i < n-len;i++){
            num = num + '0';
        }
        return num;
    }
    // 一般情況進(jìn)行開頭補(bǔ)白
    if(len>n)
        return num;
    for(var i = 0; i < n-len;i++){
        num = '0' + num;
    }
    return num;
}

var num = 123;
console.log(mypad(num,5));
console.log(mypad(num,5,false));

結(jié)果

目前來(lái)講，鑒于瀏覽器與新版本ES的支持性，我們自己做個(gè)補(bǔ)白函數(shù)還是有必要的。
當(dāng)然，可以有很多種思路去實(shí)現(xiàn)補(bǔ)白函數(shù)，本小白提供一種比較簡(jiǎn)單的。當(dāng)然，不一定補(bǔ)白的就是0，大家可以改改，比如把它變?yōu)橐粋€(gè)參數(shù)傳進(jìn)來(lái)，根據(jù)自己的想打隨便改。

希望大家多多支持，我是前端小白king，希望一起成長(zhǎng)，向大神陣營(yíng)邁進(jìn)，最后一舉成功，男的迎娶貌美程序媛，女的嫁給帥氣程序猿