建站
咨詢
售后
建站咨詢
新聞中心
ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全，padEnd()用于尾部補(bǔ)全 。
專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)回民免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
- const string = 'hi';
- string.padStart(3, 'c'); // "chi"
- string.padEnd(4, 'l'); // "hill"
語(yǔ)法
- string.padStart(
, ) - string.padEnd(
, )
了解參數(shù)
padEnd和padStart接受相同的參數(shù)。
1. maxLength
最終字符串的長(zhǎng)度。
- const result = string.padStart(5);
- result.length; // 5
當(dāng)我看到這個(gè)時(shí)，也花了我一段時(shí)間來(lái)學(xué)習(xí)。我一直以為maxLength是重復(fù)填充字符串參數(shù)的次數(shù)。所以這里只想強(qiáng)調(diào)一下此參數(shù)是當(dāng)前字符串需要填充到的目標(biāo)長(zhǎng)度，不是填充字符串重復(fù)的次數(shù)。如果這個(gè)數(shù)值小于當(dāng)前字符串的長(zhǎng)度，則返回當(dāng)前字符串本身。
當(dāng)然，我相信讀者比我聰明多了，所以我確定你沒(méi)有這種困惑
2. padString
padString 表示填充字符串。如果字符串太長(zhǎng)，使填充后的字符串長(zhǎng)度超過(guò)了目標(biāo)長(zhǎng)度，則只保留最左側(cè)的部分，其他部分會(huì)被截?cái)?。此參?shù)的默認(rèn)值是一個(gè)空格 " "(U+0020。
- 'hi'.padStart(5);
- // 等價(jià)于
- 'hi'.padStart(5, ' ');
如果你傳入的是一個(gè)空字符串，那么什么都不會(huì)填充。
- const result = 'hi'.padStart(5, '');
- result; // "hi"
- result.length; // 2
如何處理其他數(shù)據(jù)類(lèi)型
對(duì)于第二個(gè)參數(shù)padString，它接受一個(gè)string。如果我們?cè)噲D給它傳入其他數(shù)據(jù)類(lèi)型。它會(huì)調(diào)用 toString方法強(qiáng)制轉(zhuǎn)成一個(gè)字符串。我們來(lái)看看在不同的值類(lèi)型上使用toString會(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]'
有了這些知識(shí)，我們看看是否可以將這些其他值類(lèi)型傳遞給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è)有趣的例子，如果你強(qiáng)制把 undefined 轉(zhuǎn)成一個(gè)字符串，得到一個(gè)TypeError：
- undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
但當(dāng)我們把undefined作為第二個(gè)參數(shù)傳入padStart，會(huì)得到這個(gè)：
- 'SAM'.padStart(10, undefined);
- // ' SAM'
所以上面說(shuō)的 padString 參數(shù)會(huì)使用 toString 強(qiáng)制轉(zhuǎn)成字符串使用，到這里感覺(jué)又不對(duì)了 。我們先來(lái)看下規(guī)范：
| ECMAScript 規(guī)范 :如果填充的字符串是 undefined，該填充的字符串就會(huì)被規(guī)制成空格( 0x0020)。 |
好吧，我們更正一下， 除了undefined，否則傳遞的所有其他數(shù)據(jù)類(lèi)型都將使用toString強(qiáng)制轉(zhuǎn)成字符串。
如果 padString 超過(guò) maxLength 怎么辦?
如果 maxLength 數(shù)值小于等于當(dāng)前字符串的長(zhǎng)度，則返回當(dāng)前字符串本身。
- 'hi'.padEnd(2, 'SAM');
- // 'hi'
如果 maxLength 小于 padString 的長(zhǎng)度，則 padString 會(huì)被截?cái)唷?/p>
- 'hi'.padEnd(7, 'SAMANTHA');
- // 'hiSAMAN'
padStart/padEnd vs padLeft/padRight
trim 方法具有的別名。
- trimLeft是trimStart的別名
- trimRight 是 trimStart的別名
但是對(duì)于字符串填充方法，沒(méi)有別名。因此，請(qǐng)勿使用padLeft和padRight，它們不存在。這也是建議你不要使用trim別名的原因，這樣讓代碼庫(kù)中具有一致性
實(shí)戰(zhàn)用事
使用 padStart 讓字符串右對(duì)齊：
- console.log('JavaScript'.padStart(15));
- console.log('HTML'.padStart(15));
- console.log('CSS'.padStart(15));
- console.log('Vue'.padStart(15));
得到的結(jié)果：
- JavaScript
- HTML
- CSS
- Vue
數(shù)字打碼：
- const bankNumber = '2222 2222 2222 2222';
- const last4Digits = bankNumber.slice(-4);
- last4Digits.padStart(bankNumber.length, '*');
- // ***************2222
瀏覽器支持
padStart和padEnd是同時(shí)引入的，因此它們共享相似的瀏覽器支持， 除了 IE 之外，都 可以用。
本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系****公眾號(hào)。
【責(zé)任編輯：趙寧寧 TEL：（010）68476606】
名稱欄目：JavaScript字符串中的pad方法！
地址分享：http://www.5511xx.com/article/dpgehdi.html
