溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是詳解JS字符串補全方法padStart()和padEnd()，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
這個方法無意中看到的，感覺還是蠻實用的，特此分享一波。我想大家都會有遇到將時間戳轉換成時間格式的時候，時間或日期不足2位的前面補0。有了今天說的這個東西，就又可以少寫幾行代碼了，大家在項目中遇到類似場景可以去使用感受下。
ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。
padStart() padEnd() 方法用另一個字符串填充當前字符串(如果需要的話則重復填充)，返回填充后達到指定長度的字符串。
padStart() 從當前字符串的開始(左側) 位置填充。
padEnd() 從當前字符串的末尾（右側）開始填充。
語法：
str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString])
padStart() 和 padEnd() 一共接受兩個參數，第一個參數 targetLength 是當前字符串需要填充到的目標長度，第二個參數 padString 是用來填充的字符串，缺省值為" "。
返回值：
在原字符串開頭填充指定的填充字符串直到目標長度所形成的新字符串。
如果 targetLength 小于當前字符串的長度，則字符串補全不生效，返回當前字符串本身。
'abc'.padStart(1, 'd'); // "abc" 'abc'.padEnd(1, 'd'); // "abc"
如果 targetLength 小于用來填充的字符串長度與原字符串的長度之和，則截掉超出位數的補全字符串。
'abc'.padStart(6,"123456"); // "123abc" 'abc'.padEnd(6, "123456"); // "abc123"
如果省略第二個參數 padString，即使用空格補全長度。
'abc'.padStart(10); // " abc" 'abc'.padEnd(10); // "abc "
如果 padString 長度過長，則會刪除后面多出的字符串。
'abc'.padStart(5, "foo"); // "foabc" 'abc'.padEnd(5, "foo"); // "abcfo"
應用：
示例：
當我們使用時間戳并轉換成 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')
​
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
​
return `${y}-${m}-$aegqsqibtmh ${hh}:${mm}:${ss}`
}因著此方法是ES6新增方法，部分瀏覽器不支持，會有兼容性問題。 查看 Polyfill 創建的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' ? 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);
}
};
}看完這篇關于詳解JS字符串補全方法padStart()和padEnd()的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
