幾天前,我正在使用JavaScript構建倒數計時器,因此我需要格式化秒和毫秒,我希望秒始終是2位數的長度,而毫秒總是3位數的長度,換句話說,我希望 1
秒顯示爲 01
,1
毫秒顯示爲 001
。例如:1970-01-19 18:39:24
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
時間格式化
Vue.filter('dateFormat', function(originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 1970-01-18 20:37:38
最後
雖然編寫自己的padding函數並不難,但既然已經內置在JavaScript中,爲什麼還要自己去做呢?有很多有趣的函數已經內置了。在你自己構建一些東西之前,可能值得先快速搜索一下。