JavaScript中的String Pad
填充非常容易!只需輸入您想要的字符串和長(zhǎng)度即可。它將填充字符串，直到達(dá)到長(zhǎng)度為止。使用padStart在開(kāi)始處應(yīng)用它，使用padEnd在結(jié)尾處應(yīng)用它 。
- const string = 'hi';
- string.padStart(3, 'c'); // "chi"
- string.padEnd(4, 'l'); // "hill"
語(yǔ)法
這是如何使用該方法的語(yǔ)法。
- string.padStart(<maxLength>, <padString>)
- string.padEnd(<maxLength>, <padString>)
了解參數(shù)
padEnd 和 padStart 接受相同的參數(shù)。
(1) maxLength
這是結(jié)果字符串的最大長(zhǎng)度。
- const result = string.padStart(5);
- result.length; // 5
當(dāng)我學(xué)習(xí)這個(gè)時(shí)，這花了我一段時(shí)間，我一直認(rèn)為這是重復(fù)填充字符串參數(shù)的次數(shù)。所以只想強(qiáng)調(diào)一下，這個(gè)參數(shù)是設(shè)置結(jié)果字符串的MAX或目標(biāo)長(zhǎng)度。這不是填充字符串重復(fù)的次數(shù)。但是你比我聰明，所以我確定你沒(méi)有這種困惑
(2) padString
這是你想用來(lái)填充字符串的字符串。這是可選的。如果你未指定任何內(nèi)容，則默認(rèn)值為空白。
- 'hi'.padStart(5);
- // 等同于
- 'hi'.padStart(5, ' ');
而且，如果你嘗試傳遞一個(gè)空字符串，則不會(huì)發(fā)生填充。
- const result = 'hi'.padStart(5, 'hi');
- result; // ''
- result.length; // 2
它如何處理其他數(shù)據(jù)類型
對(duì)于第二個(gè)參數(shù) padString，它接受一個(gè)字符串。如果你嘗試傳遞任何其他數(shù)據(jù)類型，它將會(huì)使用 toString 將其強(qiáng)制為字符串，并將使用該字符串。因此，讓我們看看在不同的值類型上使用 toString 時(shí)會(huì)發(fā)生什么。
- // NUMBER
- (100).toString(); // '100'
- // BOOLEAN
- true.toString(); // 'true'
- false.toString(); // 'false'
- // ARRAY
- ['A'].toString(); // 'A'
- [''].toString(); // ''
- // OBJECT
- ({}).toString(); // '[object Object]'
- ({hi: 'hi'}).toString(); // '[object Object]'
現(xiàn)在知道了，讓我們看看是否將這些其他值類型傳遞給padStart(padEnd將具有相同的行為)。
- 'SAM'.padStart(8, 100); // '10010SAM'
- 'SAM'.padStart(8, true); // 'truetSAM'
- 'SAM'.padStart(8, false); // 'falseSAM'
- 'SAM'.padStart(5, ['']); // 'SAM'
- 'SAM'.padStart(5, ['hi']); // 'hiSAM'
- 'SAM'.padStart(18, {}); // '[object Object]SAM'
- 'SAM'.padStart(18, {hi: 'hi'}); // '[object Object]SAM'
處理undefined
但這里有一個(gè)有趣的問(wèn)題。當(dāng)你試圖強(qiáng)制轉(zhuǎn)換 undefined 的時(shí)候，你會(huì)得到一個(gè) TypeError。
- undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
但是，當(dāng)你傳入 undefined 作為第二個(gè)參數(shù)時(shí)，你會(huì)得到以下結(jié)果：
- 'SAM'.padStart(10, undefined);
- // ' SAM'
所以當(dāng)我說(shuō) padString 參數(shù)會(huì)用 toString 來(lái)強(qiáng)制轉(zhuǎn)換的時(shí)候，我是不是騙了你好吧，我們來(lái)深入了解一下規(guī)范。
好吧，讓我更新我的發(fā)言!除非是undefined，否則你傳遞的所有其他數(shù)據(jù)類型都將使用 toString 強(qiáng)制轉(zhuǎn)換 。
如果padString超過(guò)maxLength怎么辦?
當(dāng)?shù)谝粋€(gè)參數(shù) maxLength 不允許你的第一個(gè)參數(shù)padString有足夠的長(zhǎng)度時(shí)，它將被直接忽略。
- 'hi'.padEnd(2, 'SAM');
- // 'hi'
或者，會(huì)將其切斷。請(qǐng)記住，maxLength 表示你的 padString 可以占用的最大長(zhǎng)度減去該字符串所占用的長(zhǎng)度。
- 'hi'.padEnd(7, 'SAMANTHA');
- // 'hiSAMAN'
而且，如果你的第一個(gè)參數(shù) maxLength 小于你的字符串，它將僅返回該字符串。
- 'hello'.padEnd(1, 'SAM');
- // 'hello'
在之前的代碼筆記中，我介紹了String Trim，其中提到了trim方法具有別名。
- trimLeft是trimStart的別名
- trimRight是trimEnd的別名
但是對(duì)于字符串填充方法，沒(méi)有別名。所以不要使用 padLeft 和 padRight，它們不存在。這也是為什么鼓勵(lì)你不要使用trim別名的原因，這樣在你的代碼庫(kù)中有更好的一致性。
用例
(1) 使用padEnd進(jìn)行表格格式設(shè)置
字符串填充方法的一個(gè)很好的用例是格式化。我介紹了如何以表格格式顯示字符串。
(2) 用padStart右對(duì)齊字符串
你可以使用 padStart 格式化右對(duì)齊。
- console.log('JavaScript'.padStart(15));
- console.log('HTML'.padStart(15));
- console.log('CSS'.padStart(15));
- console.log('Vue'.padStart(15));
這將輸出：
- JavaScript
- HTML CSS Vue
(3) 收據(jù)格式
有了正確的對(duì)齊格式知識(shí)，你就可以像這樣打印收據(jù)：
- const purchase = [
- ['Masks', '9.99'],
- ['Shirt', '20.00'],
- ['Jacket', '200.00'],
- ['Gloves', '10.00'],
- ];purchase.forEach(([item, price]) => {
- return console.log(item + price.padStart(20 - item.length));
- });
這將輸出：
- Masks 9.99
- Shirt 20.00
- Jacket 200.00
- Gloves 10.00
(4) 掩蓋數(shù)字
我們也可以使用它來(lái)顯示被屏蔽的數(shù)字。
- const bankNumber = '2222 2222 2222 2222';
- const last4Digits = bankNumber.slice(-4);
- last4Digits.(bankNumber.length, '*');
- // ***************2222
瀏覽器支持
padStart和padEnd是同時(shí)推出的，所以它們共享類似的瀏覽器支持。除了IE之外，所有的瀏覽器都支持，但是我們真的很驚訝嗎?
Polyfill
對(duì)于IE或更舊的瀏覽器支持，請(qǐng)參閱此polyfill：
https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js
