JS中如何使用padStart()和padEnd()格式化字串？ （小技巧）

幾天前，我正在使用JavaScript建立倒數計時器，因此我需要格式化秒數和毫秒，我希望秒總是2位數的長度，而毫秒總是3位數的長度，換句話說，我希望1 秒顯示為01，1 毫秒顯示為001。

我最終寫出了自己的函數來「填充」這些數字，但是我發現JavaScript中內建了函數padStart() 和padEnd()來實現這些功能。在本文中，我們來看看如何在JavaScript中利用這些內建函數！

用例

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

標籤和值

假設你在同一行上有標籤和值，例如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

金額

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

￥10.1

你會想要這個。

￥10.01

日期

對於日期，日期和月份都需要2位數字。所以代替這個...

2020-5-4

你會想要這個。

2020-05-04

時間

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

1:1

你會想要這個。

01:001

padstart()

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

        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

現在，讓我們填入第一個標籤。要呼叫 padStart()，你需要傳遞兩個參數：一個用於填充字串的目標長度，另一個用於你希望填充的字元。在這種情況下，我們希望長度為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

現在填入第二行。

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

現在，讓我們填入第一個標籤，與我們之前所做的類似，但有兩個小區別。現在，我們使用 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

現在兩行都已填入。

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

數字(價格、日期、計時器等)呢?

#padding函數是專門針對字串而不是數字的，所以，我們需要先將數字轉換為字串。

價格

讓我們來看看顯示價格的初始程式碼。

const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1

要填充分，我們需要先將其轉換為字串，然後呼叫padStart() 函數，指定長度為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

現在，讓我們填滿月份以確保它是兩位數。

const month = 2;
const year = 2020;

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

計時器

最後是我們的計時器，我們要格式化兩個不同的數字，即秒和毫秒。儘管有相同的原則。這是初始代碼。

const seconds = 1;
const ms = 1;

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

現在要填充，我將在單獨的行上進行填充，以便於閱讀。

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函數並不難，但既然已經內建在JavaScript中，為什麼還要自己做呢？有很多有趣的函數已經內建了。在你自己建立一些東西之前，可能值得先快速搜尋一下。

本文轉載自：https://segmentfault.com/a/1190000022812375

相關教學推薦：JavaScript影片教學

#

以上是JS中如何使用padStart()和padEnd()格式化字串？ （小技巧）的詳細內容。更多資訊請關注PHP中文網其他相關文章！