JavaScript中的補(bǔ)白函數(shù)

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);

結(jié)果

注意:這兩個(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ǔ)白昆禽。

padEndpadStart的使用方法是一樣的蝗蛙,唯一的區(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));
結(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)乳规,最后一舉成功形葬,男的迎娶貌美程序媛,女的嫁給帥氣程序猿

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末暮的,一起剝皮案震驚了整個(gè)濱河市笙以,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌冻辩,老刑警劉巖猖腕,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異微猖,居然都是意外死亡谈息,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)凛剥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)侠仇,“玉大人,你說(shuō)我怎么就攤上這事÷叽叮” “怎么了互亮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)余素。 經(jīng)常有香客問(wèn)我豹休,道長(zhǎng),這世上最難降的妖魔是什么桨吊? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任威根,我火速辦了婚禮,結(jié)果婚禮上视乐,老公的妹妹穿的比我還像新娘洛搀。我一直安慰自己,他們只是感情好佑淀,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布留美。 她就那樣靜靜地躺著,像睡著了一般伸刃。 火紅的嫁衣襯著肌膚如雪谎砾。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,328評(píng)論 1 310
  • 那天捧颅,我揣著相機(jī)與錄音景图,去河邊找鬼。 笑死隘道,一個(gè)胖子當(dāng)著我的面吹牛症歇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谭梗,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼宛蚓!你這毒婦竟也來(lái)了激捏?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤凄吏,失蹤者是張志新(化名)和其女友劉穎远舅,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體痕钢,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡图柏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了任连。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚤吹。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出裁着,到底是詐尸還是另有隱情繁涂,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布二驰,位于F島的核電站扔罪,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏桶雀。R本人自食惡果不足惜矿酵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望矗积。 院中可真熱鬧全肮,春花似錦、人聲如沸漠魏。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)柱锹。三九已至哪自,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間禁熏,已是汗流浹背壤巷。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瞧毙,地道東北人胧华。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像宙彪,于是被迫代替她去往敵國(guó)和親矩动。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 一释漆、實(shí)驗(yàn)?zāi)康?學(xué)習(xí)使用 weka 中的常用分類(lèi)器悲没,完成數(shù)據(jù)分類(lèi)任務(wù)。 二男图、實(shí)驗(yàn)內(nèi)容 了解 weka 中 explo...
    yigoh閱讀 8,565評(píng)論 5 4
  • 關(guān)于譯者:這是一個(gè)流淌著滬江血液的純粹工程:認(rèn)真示姿,是 HTML 最堅(jiān)實(shí)的梁柱;分享逊笆,是 CSS 里最閃耀的一瞥栈戳;...
    iKcamp閱讀 1,402評(píng)論 0 2
  • 腦海中的畫(huà)面并不清晰,只記得我和朋友曉雯匆忙走在路上难裆,趕著去上課子檀。拐角處突然看到了熟悉的身影,走近一看,竟然是許久...
    這里楓菲閱讀 320評(píng)論 2 5
  • 以終為始命锄,是從依賴(lài)期到獨(dú)立期的第二個(gè)習(xí)慣堰乔,是把基于心智的第一次創(chuàng)造的那個(gè)“終”,作為基于實(shí)際的第二次創(chuàng)造的那個(gè)“始...
    Smile_Zhangjie閱讀 199評(píng)論 0 1
  • _BK_閱讀 551評(píng)論 14 13