詳解javascript中對(duì)數(shù)據(jù)格式化的思考
在實(shí)際應(yīng)用場(chǎng)景中,我們常常需將一些數(shù)據(jù)輸出成更加符合人類習(xí)慣閱讀的格式。
保留小數(shù)點(diǎn)后面兩位
在一些要求精度沒有那么準(zhǔn)確的場(chǎng)景下,我們可以直接通過Number.prototype.toFixed()
來實(shí)現(xiàn)保留小數(shù)點(diǎn)兩位這樣的需求。
var num = 123.45678 console.log(num.toFixed(2)) //123.46 var num2 = 12 console.log(num2.toFixed(2)) //12.00
不過如果恰好,數(shù)字是一個(gè)整數(shù),那么就會(huì)輸出12.00
這樣的格式,我們常常對(duì)于后面為00
的整數(shù)要求直接輸出整數(shù)即可。因此不妨這樣寫。
var num = 123.45678 console.log(num.toFixed(2).replace('.00', '')) //123.46 var num2 = 12 console.log(num2.toFixed(2).replace('.00', '')) //12
在toFixed()
后面直接接著replace()
將整數(shù)才會(huì)出現(xiàn)的.00
字符串替換掉即可。
ps: Number.prototype.toFixed
返回的是一個(gè)字符串
數(shù)字為[0-9]的情況下,前置補(bǔ)0
在輸出某些數(shù)字的時(shí)候下,如果是小于10的情況下需要在前面補(bǔ)0,尤其是在輸出日期時(shí)間的時(shí)候。
以前在用Date
對(duì)象去獲取到相關(guān)的時(shí)間數(shù)據(jù)的時(shí)候去判斷是否小于10,如果是就補(bǔ)0。
var date = new Date() var min = date.getMinutes() min = min < 10 ? '0' + min : min console.log(min) //08
后來覺得實(shí)在不夠優(yōu)雅,而且代碼繁多,就想到用字符串替換的方式。
var date = new Date() var min = String(date.getMinutes()).replace(/^(\d{1})$/, '0$1') console.log(min) //08
這樣利用正則去匹配到單數(shù)字的情況下直接在前面加上0即可,一行代碼,更加優(yōu)雅。
再繼續(xù)衍生下去,我基本上都是在日期格式化的時(shí)候需要做數(shù)字替換,何不直接整個(gè)字符串替換即可?比如將2017-1-8 12:8
替換成2017-01-08 12:08
。
var date = '2017-1-8 12:8'.replace(/\b\d{1}\b/g, '0$&') console.log(date)
通過正則去做整個(gè)字符串替換,不再針對(duì)性的針對(duì)某些部分做處理了。 最后給出完整的格式化日期函數(shù)示例。
function formatDate (source, format) { var date = new Date(); format = format || 'yyyy-MM-dd hh:mm'; if (typeof source == 'string') format = source; if (typeof source == 'number') date = new Date(source); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.getHours(); let miniute = date.getMinutes(); let second = date.getSeconds(); return format.replace('yyyy', year) .replace('MM', month) .replace('dd', day) .replace('hh', hour) .replace('mm', miniute) .replace('ss', second) .replace(/\b\d{1}\b/g, '0$&'); return date; }
上面列舉的所有代碼,都沒有考察對(duì)比過執(zhí)行效率,因?yàn)樵谶@些應(yīng)用場(chǎng)景下,效率是其次問題。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JS中定時(shí)器setInterval和setTImeout的this指向問題
在js中setTimeout和setInterval都是用來定時(shí)的一個(gè)功能,下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問題,文中通過示例介紹的很詳細(xì),有需要的朋友可以參考借鑒,一起來看看吧。2017-01-01javascript replace()用法詳解附實(shí)例代碼
在javascript中,String的函數(shù)replace()簡(jiǎn)直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力,讓我不禁想向大家介紹它。2008-10-10在LayUI圖片上傳中,解決由跨域問題引起的請(qǐng)求接口錯(cuò)誤的方法
今天小編就為大家分享一篇在LayUI圖片上傳中,解決由跨域問題引起的請(qǐng)求接口錯(cuò)誤的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實(shí)現(xiàn)即點(diǎn)即編輯功能代碼
以前在網(wǎng)上都看到過類似的功能,不過沒自己想要實(shí)現(xiàn)過,這次剛好做靜態(tài)頁面中有這樣的一個(gè)需求,就試著自己做做看,做完發(fā)現(xiàn)也不是什么很難的事情。2008-10-10使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX
使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX...2006-12-12JavaScript 中Date對(duì)象的格式化代碼方法匯總
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用,所以需要進(jìn)行格式化,下面小編給大家?guī)砹巳Njs date對(duì)象格式化實(shí)例代碼,需要的朋友參考下吧2017-09-09驗(yàn)證用戶是否修改過頁面的數(shù)據(jù)的實(shí)現(xiàn)方法
在實(shí)現(xiàn)程序的修改模塊時(shí),要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時(shí)保存修改后的數(shù)據(jù)。2008-09-09