詳解javascript中對數(shù)據(jù)格式化的思考
在實際應(yīng)用場景中,我們常常需將一些數(shù)據(jù)輸出成更加符合人類習(xí)慣閱讀的格式。
保留小數(shù)點后面兩位
在一些要求精度沒有那么準(zhǔn)確的場景下,我們可以直接通過Number.prototype.toFixed()
來實現(xiàn)保留小數(shù)點兩位這樣的需求。
var num = 123.45678 console.log(num.toFixed(2)) //123.46 var num2 = 12 console.log(num2.toFixed(2)) //12.00
不過如果恰好,數(shù)字是一個整數(shù),那么就會輸出12.00
這樣的格式,我們常常對于后面為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ù)才會出現(xiàn)的.00
字符串替換掉即可。
ps: Number.prototype.toFixed
返回的是一個字符串
數(shù)字為[0-9]的情況下,前置補0
在輸出某些數(shù)字的時候下,如果是小于10的情況下需要在前面補0,尤其是在輸出日期時間的時候。
以前在用Date
對象去獲取到相關(guān)的時間數(shù)據(jù)的時候去判斷是否小于10,如果是就補0。
var date = new Date() var min = date.getMinutes() min = min < 10 ? '0' + min : min console.log(min) //08
后來覺得實在不夠優(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ù)字替換,何不直接整個字符串替換即可?比如將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)
通過正則去做整個字符串替換,不再針對性的針對某些部分做處理了。 最后給出完整的格式化日期函數(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; }
上面列舉的所有代碼,都沒有考察對比過執(zhí)行效率,因為在這些應(yīng)用場景下,效率是其次問題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JS中定時器setInterval和setTImeout的this指向問題
在js中setTimeout和setInterval都是用來定時的一個功能,下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問題,文中通過示例介紹的很詳細,有需要的朋友可以參考借鑒,一起來看看吧。2017-01-01在LayUI圖片上傳中,解決由跨域問題引起的請求接口錯誤的方法
今天小編就為大家分享一篇在LayUI圖片上傳中,解決由跨域問題引起的請求接口錯誤的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX
使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX...2006-12-12驗證用戶是否修改過頁面的數(shù)據(jù)的實現(xiàn)方法
在實現(xiàn)程序的修改模塊時,要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時保存修改后的數(shù)據(jù)。2008-09-09