hello 大家好,我是一只前端小白缀程,大佬請(qǐng)留言指導(dǎo)。
今天看書(shū)看到j(luò)s中將數(shù)字轉(zhuǎn)換為字符串的地方市俊,突然想起一件事杨凑,當(dāng)本小白還是超級(jí)小白的時(shí)候,做過(guò)一個(gè)時(shí)間顯示的小案例摆昧,當(dāng)時(shí)對(duì)于數(shù)字補(bǔ)白感覺(jué)特別詭異撩满,就想,這種東西怎么做啊据忘,上網(wǎng)百度一下看看js中是不是提供了補(bǔ)白的函數(shù)鹦牛,結(jié)果并沒(méi)有找到,當(dāng)時(shí)我的做法特別傻逼
h<10?'0'+h:h;
就類(lèi)似這樣子寫(xiě)的勇吊,時(shí)分秒都是這樣子,艾瑪窍仰,當(dāng)時(shí)都不知道自己封裝個(gè)函數(shù)汉规。
有個(gè)小建議,就是我們平時(shí)練習(xí)或者學(xué)習(xí)時(shí)候驹吮,可以自己做個(gè)js文件针史,將一些實(shí)用的小功能直接封裝到里面。
言歸正傳碟狞。
ES7中方法
現(xiàn)在我來(lái)介紹一下JavaScript中的補(bǔ)白方法啄枕,js之前雖然沒(méi)有提供這樣的方法,但是在ES7中新增的補(bǔ)白的函數(shù)padStart(n,tar) padEnd(n,tar)
族沃,我們先來(lái)體驗(yàn)一把:
var res = '1'.padStart(2,'0');
console.log(res);
注意:這兩個(gè)方法都是字符串新增的API频祝,不能直接用Number類(lèi)型補(bǔ)白
1.padStart(2,'0'),這樣是錯(cuò)的
這先介紹一下padStart
:根據(jù)名字我們就可以知道這是在字符串最前面開(kāi)始補(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ǔ)白比較常用所以我就專(zhuān)門(mén)是為數(shù)字提供的補(bǔ)白
/**
* [mypad 我的補(bǔ)白函數(shù)]
* @param {[mixed]} num [我們補(bǔ)白的目標(biāo)數(shù)字漾根,可以使number和string類(lèi)型]
* @param {[number]} n [預(yù)期位數(shù)]
* @param {Boolean} flag [是否在開(kāi)頭補(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)行開(kāi)頭補(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));
目前來(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)乳规,最后一舉成功形葬,男的迎娶貌美程序媛,女的嫁給帥氣程序猿