<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • JavaScript的padStart()和padEnd()格式化字符串使用技巧

    2020-5-29    seo達(dá)人

    用例

    讓我們從介紹幾種不同的填充用例開始。


    標(biāo)簽和值

    假設(shè)你在同一行上有標(biāo)簽和值,例如 name:zhangsan 和 Phone Number:(555)-555-1234。如果把他們放在一起看起來會(huì)有點(diǎn)奇怪,會(huì)是這樣:


    Name: zhangsan

    Phone Number: (555)-555-1234

    你可能想要這個(gè)。


    Name:           zhangsan

    Phone Number:   (555)555-1234

    或這個(gè)...


           Name: zhangsan

    Phone Number: (555)555-1234

    金額

    在中國,顯示價(jià)格時(shí)通常顯示兩位數(shù)的角、分。所以代替這個(gè)...


    ¥10.1

    你會(huì)想要這個(gè)。


    ¥10.01

    日期

    對于日期,日期和月份都需要2位數(shù)字。所以代替這個(gè)...


    2020-5-4

    你會(huì)想要這個(gè)。


    2020-05-04

    時(shí)間

    與上面的日期類似,對于計(jì)時(shí)器,你需要2位數(shù)字表示秒,3位數(shù)字表示毫秒。所以代替這個(gè)...


    1:1

    你會(huì)想要這個(gè)。


    01:001

    padstart()

    讓我們從 padStart() 以及標(biāo)簽和值示例開始。假設(shè)我們希望標(biāo)簽彼此正確對齊,以使值在同一位置開始。


           Name: zhangsan

    Phone Number: (555)555-1234

    由于 Phone Number 是兩個(gè)標(biāo)簽中較長的一個(gè),因此我們要在 Name 標(biāo)簽的開頭加上空格。為了將來的需要,我們不要把它專門填充到電話號碼的長度,我們把它填充到長一點(diǎn),比如說20個(gè)字符。這樣一來,如果你在未來使用較長的標(biāo)簽,這一招仍然有效。


    在填充之前,這是用于顯示此信息的入門代碼。


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log(label1 + ": " + name);

    console.log(label2 + ": " + phoneNumber);


    //Name: zhangsan

    //Phone Number: (555)-555-1234

    現(xiàn)在,讓我們填充第一個(gè)標(biāo)簽。要調(diào)用 padStart(),你需要傳遞兩個(gè)參數(shù):一個(gè)用于填充字符串的目標(biāo)長度,另一個(gè)用于你希望填充的字符。在這種情況下,我們希望長度為20,而填充字符為空格。


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log(label1.padStart(20, " ") + ": " + name);

    console.log(label2 + ": " + phoneNumber);


    //               Name: zhangsan

    ////Phone Number: (555)-555-1234

    現(xiàn)在填充第二行。


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log(label1.padStart(20, " ") + ": " + name);

    console.log(label2.padStart(20, " ") + ": " + phoneNumber);


    //               Name: zhangsan

    ////     Phone Number: (555)-555-1234

    padEnd()

    對于相同的標(biāo)簽和值示例,讓我們更改填充標(biāo)簽的方式。讓我們將標(biāo)簽向左對齊,以便在末尾添加填充。


    初始代碼


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log(label1 + ": " + name);

    console.log(label2 + ": " + phoneNumber);


    //Name: zhangsan

    //Phone Number: (555)-555-1234

    現(xiàn)在,讓我們填充第一個(gè)標(biāo)簽,與我們之前所做的類似,但有兩個(gè)小區(qū)別。現(xiàn)在,我們使用 padEnd() 而不是padStart(),并且需要在填充之前將冒號與標(biāo)簽連接起來,這樣我們就能確保冒號在正確的位置。


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log((label1 + ': ').padEnd(20, ' ') + name);

    console.log(label2 + ": " + phoneNumber);


    //Name:               zhangsan

    //Phone Number: (555)-555-1234

    現(xiàn)在兩行都已填充。


    const label1 = "Name";

    const label2 = "Phone Number";

    const name = "zhangsan"

    const phoneNumber = "(555)-555-1234";


    console.log((label1 + ': ').padEnd(20, ' ') + name);

    console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);


    //Name:               zhangsan

    //Phone Number:       (555)-555-1234

    數(shù)字(價(jià)格、日期、計(jì)時(shí)器等)呢?

    padding函數(shù)是專門針對字符串而不是數(shù)字的,所以,我們需要先將數(shù)字轉(zhuǎn)換為字符串。


    價(jià)格

    讓我們看一下顯示價(jià)格的初始代碼。


    const rmb = 10;

    const cents = 1;

    console.log("¥" + rmb + "." + cents); //¥10.1

    要填充分,我們需要先將其轉(zhuǎn)換為字符串,然后調(diào)用 padStart() 函數(shù),指定長度為1且填充字符為'0';


    const rmb = 10;

    const cents = 1;

    console.log("¥" + rmb + "." + cents.toString().padStart(2,0)); //¥10.01

    日期

    這是顯示日期的初始代碼。


    const month = 2;

    const year = 2020;


    console.log(year + "-" + month); //2020-2

    現(xiàn)在,讓我們填充月份以確保它是兩位數(shù)。


    const month = 2;

    const year = 2020;


    console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02

    計(jì)時(shí)器

    最后是我們的計(jì)時(shí)器,我們要格式化兩個(gè)不同的數(shù)字,即秒和毫秒。盡管有相同的原則。這是初始代碼。


    const seconds = 1;

    const ms = 1;


    console.log(seconds + ":" + ms); //1:1

    現(xiàn)在要填充,我將在單獨(dú)的行上進(jìn)行填充,以便于閱讀。


    const seconds = 1;

    const formattedSeconds = seconds.toString().padStart(2,0);

    const ms = 1;

    const formattedMs = ms.toString().padStart(3,0);


    console.log(formattedSeconds + ":" + formattedMs); // 01:001

    最后

    雖然編寫自己的padding函數(shù)并不難,但既然已經(jīng)內(nèi)置在JavaScript中,為什么還要自己去做呢?有很多有趣的函數(shù)已經(jīng)內(nèi)置了。在你自己構(gòu)建一些東西之前,可能值得先快速搜索一下。

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 精品亚洲麻豆1区2区3区| 97精品人妻系列无码人妻| 久久棈精品久久久久久噜噜| 国产高清在线精品一本大道国产| 无码精品人妻一区二区三区中| 国产亚洲精品资在线| 精品四虎免费观看国产高清午夜| 日韩精品无码中文字幕一区二区| 精品国精品国产自在久国产应用男| 精品九九人人做人人爱| 国产精品视频一区二区三区无码| 亚洲福利精品电影在线观看| 91精品国产成人网在线观看| 九九热在线视频观看这里只有精品| 精品国产乱码久久久久久1区2区| 中文字幕亚洲精品无码| 久久久久九国产精品| 91探花国产综合在线精品| 国产国产成人精品久久| 国产欧美日韩综合精品一区二区| 亚洲高清国产AV拍精品青青草原| 亚洲国产精品专区在线观看| 精品久久久久一区二区三区| 国产精品二区观看| 成人免费精品网站在线观看影片| 凹凸69堂国产成人精品视频| 国产精品乱码高清在线观看| 国产精品无码A∨精品影院| 久久九九精品99国产精品| 亚洲精品无码MV在线观看| 亚洲精品国自产拍在线观看| 无码人妻精品一区二区蜜桃AV| 精品无码人妻久久久久久| 精品人妻一区二区三区毛片| 国产精品无码不卡一区二区三区| 在线电影国产精品| 国产精品亚洲专区无码WEB | 久久狠狠一本精品综合网| 国产亚洲精品AA片在线观看不加载| 国产精品福利电影一区二区三区四区欧美白嫩精品| 99re只有精品8中文|