JavaScript的padStart()和padEnd()格式化字符串使用技巧

2020-5-29    seo達人

用例

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


標簽和值

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


Name: zhangsan

Phone Number: (555)-555-1234

你可能想要這個。


Name:           zhangsan

Phone Number:   (555)555-1234

或這個...


       Name: zhangsan

Phone Number: (555)555-1234

金額

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


¥10.1

你會想要這個。


¥10.01

日期

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


2020-5-4

你會想要這個。


2020-05-04

時間

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


1:1

你會想要這個。


01:001

padstart()

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


       Name: zhangsan

Phone Number: (555)555-1234

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


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


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)在,讓我們填充第一個標簽。要調(diào)用 padStart(),你需要傳遞兩個參數(shù):一個用于填充字符串的目標長度,另一個用于你希望填充的字符。在這種情況下,我們希望長度為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()

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


初始代碼


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


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ù)字(價格、日期、計時器等)呢?

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


價格

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


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

計時器

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


const seconds = 1;

const ms = 1;


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

現(xià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)建一些東西之前,可能值得先快速搜索一下。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔