這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹JS用padStart和padEnd函數(shù)格式化字符串的方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、羅平網(wǎng)絡(luò)推廣、小程序制作、羅平網(wǎng)絡(luò)營(yíng)銷(xiāo)、羅平企業(yè)策劃、羅平品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供羅平建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

幾天前，我正在使用JavaScript構(gòu)建倒數(shù)計(jì)時(shí)器，因此我需要格式化秒和毫秒，我希望秒始終是2位數(shù)的長(zhǎng)度，而毫秒總是3位數(shù)的長(zhǎng)度，換句話說(shuō)，我希望 1 秒顯示為 01，1 毫秒顯示為 001。

我最終寫(xiě)出了自己的函數(shù)來(lái)“填充”這些數(shù)字，但是我發(fā)現(xiàn)JavaScript中內(nèi)置了函數(shù) padStart()和 padEnd()來(lái)實(shí)現(xiàn)這些功能。

用例

讓我們從介紹幾種不同的填充用例開(kāi)始。

標(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í)間

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

1:1

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

01:001

padstart()

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

        Name: zhangsan
Phone Number: (555)555-1234

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

在填充之前，這是用于顯示此信息的入門(mén)代碼。

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)簽，與我們之前所做的類(lèi)似，但有兩個(gè)小區(qū)別。現(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ù)是專(zhuān)門(mén)針對(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

關(guān)于JS用padStart和padEnd函數(shù)格式化字符串的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。