詳解JS字符串補全方法padStart()和padEnd()

小編這次要給大家分享的是詳解JS字符串補全方法padStart()和padEnd()，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

鹿泉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

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

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。

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

語法：

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

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

返回值：

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

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

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

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

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

如果省略第二個參數(shù) padString，即使用空格補全長度。

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

如果 padString 長度過長，則會刪除后面多出的字符串。

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

應(yīng)用：

補全指定位數(shù)，如格式化時間或日期時，個位數(shù)補0
提示字符串格式字符串拼接

示例：

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

function dataFormat(data) {
  const dt = new Date(data * 1000) //注：如果是13位時間戳不用*1000 
  
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDay() + '').padStart(2, '0')
&#8203;
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
&#8203;
  return `${y}-${m}-$ftpht2j ${hh}:${mm}:${ss}`
}

因著此方法是ES6新增方法，部分瀏覽器不支持，會有兼容性問題。查看 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/padEnd
if (!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' &#63; 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字符串補全方法padStart()和padEnd()的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

新聞標(biāo)題：詳解JS字符串補全方法padStart()和padEnd()
轉(zhuǎn)載源于：http://bm7419.com/article38/pcecpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、用戶體驗、建站公司、網(wǎng)站設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容