這個(gè)方法無(wú)意中看到的，感覺(jué)還是蠻實(shí)用的，特此分享一波。我想大家都會(huì)有遇到將時(shí)間戳轉(zhuǎn)換成時(shí)間格式的時(shí)候，時(shí)間或日期不足2位的前面補(bǔ)0。有了今天說(shuō)的這個(gè)東西，就又可以少寫幾行代碼了，大家在項(xiàng)目中遇到類似場(chǎng)景可以去使用感受下。

ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(bǔ)全。

padStart() padEnd() 方法用另一個(gè)字符串填充當(dāng)前字符串(如果需要的話則重復(fù)填充)，返回填充后達(dá)到指定長(zhǎng)度的字符串。padStart() 從當(dāng)前字符串的開(kāi)始(左側(cè)) 位置填充。padEnd() 從當(dāng)前字符串的末尾（右側(cè)）開(kāi)始填充。

語(yǔ)法：

str.padStart(targetLength [, padString])str.padEnd(targetLength [, padString])

padStart() 和 padEnd() 一共接受兩個(gè)參數(shù)，第一個(gè)參數(shù) targetLength 是當(dāng)前字符串需要填充到的目標(biāo)長(zhǎng)度，第二個(gè)參數(shù) padString 是用來(lái)填充的字符串，缺省值為' '。

返回值：

在原字符串開(kāi)頭填充指定的填充字符串直到目標(biāo)長(zhǎng)度所形成的新字符串。

如果 targetLength 小于當(dāng)前字符串的長(zhǎng)度，則字符串補(bǔ)全不生效，返回當(dāng)前字符串本身。

’abc’.padStart(1, ’d’); // 'abc'’abc’.padEnd(1, ’d’); // 'abc'

如果 targetLength 小于用來(lái)填充的字符串長(zhǎng)度與原字符串的長(zhǎng)度之和，則截掉超出位數(shù)的補(bǔ)全字符串。

’abc’.padStart(6,'123456'); // '123abc'’abc’.padEnd(6, '123456'); // 'abc123'

如果省略第二個(gè)參數(shù) padString，即使用空格補(bǔ)全長(zhǎng)度。

’abc’.padStart(10); // ' abc'’abc’.padEnd(10); // 'abc '

如果 padString 長(zhǎng)度過(guò)長(zhǎng)，則會(huì)刪除后面多出的字符串。

’abc’.padStart(5, 'foo'); // 'foabc'’abc’.padEnd(5, 'foo'); // 'abcfo'

應(yīng)用：

示例：

當(dāng)我們使用時(shí)間戳并轉(zhuǎn)換成 yyyy-mm-dd hh:mm:ss 的格式。

function dataFormat(data) { const dt = new Date(data * 1000) //注：如果是13位時(shí)間戳不用*1000 const y = dt.getFullYear() const m = (dt.getMonth() + 1 + ’’).padStart(2, ’0’) const d = (dt.getDay() + ’’).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}-$vyzdlmgt ${hh}:${mm}:${ss}`}

因著此方法是ES6新增方法，部分瀏覽器不支持，會(huì)有兼容性問(wèn)題。 查看 Polyfill 創(chuàng)建的String.prototype.padStart() / String.prototype.padEnd() 方法。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEndif (!String.prototype.padEnd) { String.prototype.padEnd = function padEnd(targetLength,padString) { targetLength = targetLength>>0; //floor if number or convert non-number to 0; padString = String((typeof padString !== ’undefined’ ? padString: ’’)); if (this.length > targetLength) { return String(this); } else { targetLength = targetLength-this.length; if (targetLength > padString.length) {padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed } return String(this) + padString.slice(0,targetLength); } };}

到此這篇關(guān)于JS字符串補(bǔ)全方法padStart()和padEnd()的文章就介紹到這了,更多相關(guān)JS padStart() padEnd()內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！