2020-5-29 seo達(dá)人
用例
讓我們從介紹幾種不同的填充用例開始。
標(biāo)簽和值
假設(shè)你在同一行上有標(biāo)簽和值,例如 name:zhangsan 和 Phone Number:(555)-555-1234。如果把他們放在一起看起來(lái)會(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
金額
在中國(guó),顯示價(jià)格時(shí)通常顯示兩位數(shù)的角、分。所以代替這個(gè)...
¥10.1
你會(huì)想要這個(gè)。
¥10.01
日期
對(duì)于日期,日期和月份都需要2位數(shù)字。所以代替這個(gè)...
2020-5-4
你會(huì)想要這個(gè)。
2020-05-04
時(shí)間
與上面的日期類似,對(duì)于計(jì)時(shí)器,你需要2位數(shù)字表示秒,3位數(shù)字表示毫秒。所以代替這個(gè)...
1:1
你會(huì)想要這個(gè)。
01:001
padstart()
讓我們從 padStart() 以及標(biāo)簽和值示例開始。假設(shè)我們希望標(biāo)簽彼此正確對(duì)齊,以使值在同一位置開始。
Name: zhangsan
Phone Number: (555)555-1234
由于 Phone Number 是兩個(gè)標(biāo)簽中較長(zhǎng)的一個(gè),因此我們要在 Name 標(biāo)簽的開頭加上空格。為了將來(lái)的需要,我們不要把它專門填充到電話號(hào)碼的長(zhǎng)度,我們把它填充到長(zhǎng)一點(diǎn),比如說(shuō)20個(gè)字符。這樣一來(lái),如果你在未來(lái)使用較長(zhǎng)的標(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)長(zhǎng)度,另一個(gè)用于你希望填充的字符。在這種情況下,我們希望長(zhǎng)度為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()
對(duì)于相同的標(biāo)簽和值示例,讓我們更改填充標(biāo)簽的方式。讓我們將標(biāo)簽向左對(duì)齊,以便在末尾添加填充。
初始代碼
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ū)別?,F(xiàn)在,我們使用 padEnd() 而不是padStart(),并且需要在填充之前將冒號(hào)與標(biāo)簽連接起來(lái),這樣我們就能確保冒號(hà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ù)是專門針對(duì)字符串而不是數(shù)字的,所以,我們需要先將數(shù)字轉(zhuǎn)換為字符串。
價(jià)格
讓我們看一下顯示價(jià)格的初始代碼。
const rmb = 10;
const cents = 1;
console.log("¥" + rmb + "." + cents); //¥10.1
要填充分,我們需要先將其轉(zhuǎn)換為字符串,然后調(diào)用 padStart() 函數(shù),指定長(zhǎng)度為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)建一些東西之前,可能值得先快速搜索一下。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com