JS字符串補(bǔ)全方法padStart()和padEnd()
這個(gè)方法無(wú)意中看到的,感覺(jué)還是蠻實(shí)用的,特此分享一波。我想大家都會(huì)有遇到將時(shí)間戳轉(zhuǎn)換成時(shí)間格式的時(shí)候,時(shí)間或日期不足2位的前面補(bǔ)0。有了今天說(shuō)的這個(gè)東西,就又可以少寫(xiě)幾行代碼了,大家在項(xiàng)目中遇到類(lèi)似場(chǎng)景可以去使用感受下。
ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度,會(huì)在頭部或尾部補(bǔ)全。
padStart() padEnd() 方法用另一個(gè)字符串填充當(dāng)前字符串(如果需要的話(huà)則重復(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)用:
- 補(bǔ)全指定位數(shù),如格式化時(shí)間或日期時(shí),個(gè)位數(shù)補(bǔ)0
- 提示字符串格式 字符串拼接
示例:
當(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}-$ublnpf9mb ${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/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); } }; }
到此這篇關(guān)于JS字符串補(bǔ)全方法padStart()和padEnd()的文章就介紹到這了,更多相關(guān)JS padStart() padEnd()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解JavaScript中常用的函數(shù)類(lèi)型
這篇文章主要介紹了三種JavaScript中常用的函數(shù)類(lèi)型,包括匿名函數(shù)、動(dòng)態(tài)函數(shù)、可變參數(shù)函數(shù),感興趣的小伙伴們可以參考一下2015-11-11原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件
這篇文章主要介紹了原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04JavaScript無(wú)阻塞加載和defer、async詳解
JS具有阻塞特性,當(dāng)瀏覽器在執(zhí)行js代碼時(shí),不能同時(shí)做其它事情,所有瀏覽器在下載JS的時(shí)候,會(huì)阻止一切其他活動(dòng),比如其他資源的下載,內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。2017-02-02JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中純函數(shù)的函數(shù)依賴(lài)、所指透明等概念相關(guān)原理及使用技巧,需要的朋友可以參考下2019-05-05JavaScript中Array方法你該知道的正確打開(kāi)方法
string和array作為javascript內(nèi)置對(duì)象,其中許多方法無(wú)論是在開(kāi)發(fā)過(guò)程中,還是在面試的時(shí)候都有機(jī)會(huì)被面試官問(wèn)到,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Array方法你該知道的正確打開(kāi)方法,需要的朋友可以參考下2018-09-09javascript 中String.match()與RegExp.exec()的區(qū)別說(shuō)明
最近看了javascript權(quán)威指南 里面的正則部分,match和exec方法有一些相同點(diǎn)和不同點(diǎn),在這里寫(xiě)一下加深一下印象2013-01-01小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12