finereport格式化金額函數(shù)-js中進行數(shù)字,超大金額（千位符）格式化處理

1、finereport格式化額函數(shù)_js中進數(shù)字,超額（千位符）格式化處理前最近遇到個需求,對于社區(qū)討論的帖展個訪問量的計數(shù)顯問題,當超過多少頁訪問量時,就讓其顯xxx萬,xx億 對于后臺返回該字段的數(shù)據(jù)類型是number,需要進格式化數(shù)字的輸出這個應場景在前端開發(fā)中其實很普遍,例如:樂app樂歌曲播放數(shù)量,微博的點贊數(shù),評論留條數(shù),頁的訪問量,超額(千位符 格式)處理,甚時間格式轉(zhuǎn)換等處理下就起來看看怎么處理的數(shù)字超時-末尾添加相應的單位需求:當后臺接返回個較的數(shù)字時,例如:1000,26742238,1234787325,低于6位數(shù)時,讓數(shù)字完全顯,若于4位,低于8位,給數(shù)字加相對應的單位,

2、那么需要在前臺做轉(zhuǎn)換為2674.22萬,12.34億例代碼如下所:封裝個格式化函數(shù)function tranNumber(num, point)/ 將數(shù)字轉(zhuǎn)換為字符串,然后通過split法.分隔,取到第0個let numStr = num.toString().split(.)0if(numStr.length=6 & numStr.length8) / 如果數(shù)字于8位,讓其數(shù)字后加單位億let decimal = numStr.substring(numStr.length-8, numStr.length-8+point); console.log(decimal);return pars

3、eFloat(parseInt(num/100000000)+.+decimal)+億console.log(tranNumber(1000,2) / 1000 console.log(tranNumber(26742238,2) / 2674.22萬console.log(tranNumber(1234787325,2) / 12.34億復制代碼例效果如下所當然對于數(shù)點后留位,可以定義的,如果那種計量頁瀏覽量,視頻播放次數(shù),以及點贊數(shù),評論數(shù),省略后的數(shù),其實沒有什么但是要注意的是:如果涉及到額轉(zhuǎn)賬之類,那可不能隨意舍掉的,不然的話,板會找你問話的數(shù)字千位符格式化:1450068,經(jīng)過處理之

4、后:1,450,068 這在前端是個常常見的問題,后臺返回額數(shù)字,前臺拿到之后,要進格式化處理,然后顯到頁上法:利字符串提供的toLocaleString()法處理,此法最簡單var num = 1450068;console.log(num.toLocaleString() / 1,450,068 復制代碼法:截取末尾三個字符的功能可以通過字符串類型的slice、substr或substring法做到/*slice() 法可從已有的數(shù)組中返回選定的元素,截取數(shù)組的個法*/function toThousandsNum(num) var num = (num | 0).toString(),

5、result = ;while (num.length 3) /此處數(shù)組的slice法，如果是負數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置result = , + num.slice(-3) + result;num = num.slice(0, num.length - 3);/ 如果數(shù)字的開頭為0,不需要逗號if (num)result = num + resultreturn result;console.log(toThousandsNum(000123456789123) / 123,456,789,123 復制代碼(result)的開頭，每插 (i為0時)不需要逗號。最后 通過調(diào)新數(shù)組

6、的join法得出結(jié)果如下代碼所function toThousands(num) var result = ,counter = 0;num = (num | 0).toString().split(); for (var i = num.length - 1; i = 0; i-) counter+;result.unshift(numi);if (!(counter % 3) & i != 0) result.unshift(,);return result.join();console.log(toThousands(236471283572983412); / 236,471,283,

7、572,983,420 復制代碼法四:不把字符串打散為數(shù)組，始終對字符串操作,下的這種操作字符串的式是對上的改良function toThousands(num) var result = , counter = 0;num = (num | 0).toString();for (var i = num.length - 1; i = 0; i-) counter+;result = num.charAt(i) + result; if (!(counter % 3) & i != 0) result = , + result;return result;console.log(toThous

8、ands(42371582378423) / 42,371,582,378,423 復制代碼法五:正則表達式,此法個覺得較難以理解,上寫的function toThousands(num) var numStr = (num | 0).toString();return numStr.replace(/(d)(?=(?:d3)+$)/g, $1,);復制代碼toLocalString()法,即使數(shù)字開始是0,這個法也 動幫我們處理了的,實際開發(fā)中,強烈建議第種式最好,后的法僅次有時候,往往在試時會被問到,除了最簡單的種式,還有沒有別的式,其他法是有些燒腦殼的結(jié)合第三庫的使當你覺得編寫這種格式化

9、法較繁瑣的時候,總有好的具已經(jīng)幫我們實現(xiàn)了的Numeral.jsGitHub：/adamwdraper 它是個于格式化和操作數(shù)字的JavaScript庫下載具體的件:bootcdn下載或者github下載都可以 根據(jù)官檔使案例:直接使即可它也持npm,在React,Vue等前端框架,甚微信程序同樣可以使var string = numeral(1634600).format(0,0); console.log(string); / 1,634,600復制代碼具體詳細使,可參照官冊檔 這個庫在githu上的star有七千多的,說明使的還是挺多的如果僅僅是個的功能數(shù)字的轉(zhuǎn)換,引個庫進去,未免有些才

10、了,這個庫不僅僅格式化數(shù)字,格式化成時間,貨幣,百分,位數(shù), 以及千分位.時間戳轉(zhuǎn)換為指定的期時間格式例如:前臺得到這樣的時間格式:1572728572986或者2019-10-11T05:04:02.506Z等格式前臺拿到該createTime時間字段,但時間格式需要做處理最終需要轉(zhuǎn)換為2019年-11-03 05時:02分:52秒或者2019-11-03 05:02:52或者2019/11/03 05:02:52,2019-10-11 13:04:02等指定的格式的式:使toLocalString()法此法可將本地時間Date對象轉(zhuǎn)換為字符串,并返回結(jié)果,如果new Date()沒有接收任

11、何參數(shù),它會返回當下時刻的時間/*使toLocaleString()法可根據(jù)本地時間把 Date 對象轉(zhuǎn)換為字符串，并返回結(jié)果*/var d = new Date(1572728572986); console.log(d.toLocaleString() / 2019/11/3 上 午 5:02:52 復制代碼當然你現(xiàn)在看到的與我們指定想要的結(jié)果不致,例如:輸出這樣的格式的 2019年1103 05點02分52秒，代碼如下所:如果你想要輸出格式如上中樣的,只需要把拼接的連字符替換掉成你想要的格式就可以了的*這種法是直接改變Date的原型下的法,這樣也是可以的getFullYear,getMo

12、nth,getDate,getMinutes,getHours,getMinutes,getSeconds法,獲取年,，時,分,秒利字符串+加號拼接起來,如果你覺得+號拼接字符串很不舒服,也可以Es6中的模板字符串法的$變量*/var d = new Date(1572728572986); Dtotype.toLocaleString = function() return this.getFullYear() + 年 + (this.getMonth() + 110?0+this.getMonth()+1:this.getMonth()+1) + + (this.getDate()10?0

13、+this.getDate():this.getDate() + + (this.getHours()10?0+this.getHours():this.getHours() + 點 + (this.getMinutes()10?0+this.getMinutes():this.getMinutes() + 分 + (this.getSeconds()10?0+this.getSeconds():this.getSeconds() + 秒;console.log(d.toLocaleString(); / 2019年1103 05點02分52秒復制代碼當然在new Date()下還有其他的些法

14、,例如你只想要獲得年,可以使toLocalDateString法的該法是把本地時間把 Date 對象的期部分轉(zhuǎn)換為字符串,并返回結(jié)果/*使時間對象下的toLocaleDateString法,但是此法只能獲取到年,并不能得到時,分,秒*/var d = new Date(1572728572986); console.log(d.toLocaleDateString() / 2019/11/3 復制代碼但是如果想要獲取時,分,秒,可以使toLocaleTimeString這個法的,于更多的些API法,家可以在控制臺下進測試,也可以查看MDN檔的,如下gif所的,如果有不清楚,順便百度,歌的式:利

15、new Date()法,getFullYear(),getMonth(),getDate(),getHours(),getMinutes(),getSeconds()/*new Date(時間戳)獲取年:new Date(時間戳).getFullYear()獲取:new Date(時間戳).getMonth()+1獲取:new Date(時間戳).getDate()獲取時:new Date(時間戳).getHours()獲取分鐘:new Date(時間戳).getMinutes()獲取秒:new Date(時間戳).getSeconds()*下使的是Es6中的模板字符串,反引號,直接可以寫變量

16、,避免了使+加號做字符串的拼接,同時當,時,分鐘,秒于10時,做了個補零的操作*/var date = new Date(1572728572986); var Year = $date.getFullYear()-;varMonth=$date.getMonth()+110?0$date.getMonth()+1:date.getMonth()+1-; var Day = $date.getDate()10? 0$date.getDate():date.getDate();var hour = $date.getHours()10? 0$date.getHours():date.Hours(

17、):;var min = $date.getMinutes()10?0$date.getMinutes():date.getMinutes():; var sec = $date.getSeconds()10? 0$date.getSeconds():date.getSeconds(); var formateDate = $Year$Month$Day $hour$min$sec console.log(formateDate); / 2019-11-03 05:02:52復制代碼如果你想要2019/11/03 05:02:52,這種格式,你只需要改變拼接后的連接符-替換成斜杠就可以了這種法

18、是最直接也是沒有什么邏輯可的,使系統(tǒng)內(nèi)置的Date函數(shù)就可以實現(xiàn)的,但是復性很差式三:同樣也是使new Date(),但是如果把它封裝成個函數(shù),那么就可以隨意調(diào)了/*time代表的是時間戳,第個參數(shù)format是代表是格式化成什么樣:如2019年-11-03 05時:02分:52秒這種形式等*/function formatDateTime (time, format) var t = new Date(time);var tf = function(i) / 補 零 操 作return (i 10 ? 0 : ) + i;return format.replace(/yyyy|MM|dd|H

19、H|mm|ss/g, function(a) switch(a)case yyyy:return tf(t.getFullYear(); / 獲取年break; caseMM:return tf(t.getMonth() + 1); / 獲 取 break;case dd:return tf(t.getDate(); / 獲取break;case HH:return tf(t.getHours(); / 獲取時break;case mm:return tf(t.getMinutes(); / 獲取分鐘break;case ss:return tf(t.getSeconds(); / 獲取秒br

20、eak;)console.log(formatDateTime(1572728572986,yyyy年-MM-dd HH時:mm分:ss秒); / 2019年-11-03 05時:02分:52 秒復制代碼語句,進了格式化時間操作,第個參數(shù)代表的是時間戳,第個參數(shù)代表的是想 要格式化什么樣的形式export暴露出去,在要使的時間格式化的 件內(nèi)上通過import導的/*封裝時間格式化函數(shù)formatDateTime,date表時間戳*/function formatDateTime(date)let fmt = yyyy-MM-dd hh:mm:ss / 這是指定的時間格式,你可以在后加上年,時分

21、,秒的,例如:yyyy年-MM-dd hh時:mm 分:ss秒const o = M+: date.getMonth() + 1, / 份d+: date.getDate(), / h+: date.getHours(), / 時m+: date.getMinutes(), / 分鐘s+: date.getSeconds(), / 秒if (/(y+)/.test(fmt) / 對指定的格式進校驗fmt = fmt.replace(RegExp.$1, date.getFullYear() / 替換操作for (let k in o) / 遍歷對象，補零操作,如果長度等于1的話,則數(shù)字前補個零

22、if (new RegExp( + k + ).test(fmt) fmt = fmt.replace(RegExp.$1, ok.toString().length = 1 ? 0 + ok : ok)/ console.log(fmt) return fmtconsole.log(formatDateTime(new Date(1572728572986) / 2019-11-03 05:02:52console.log(formatDateTime(new Date(2019-10-11T05:04:02.506Z) / 2019-10-11 13:04:02console.log(fo

23、rmatDateTime(new Date(Fri Oct 11 2019 13:04:02 GMT+0800) / 這個是東區(qū)時間格式,2019-10-1113:04:02export default formatDateTime; 復制代碼對于這種常的具類法,在前端開發(fā)需求中的使是很頻繁的,旦遇到了,寫個也沒有什么問題,也可以百度,歌下的,但發(fā)現(xiàn)有 的些例是并不完整的,存在些問題,有時也滿不了業(yè)務的需求 法五:使jutils第三庫進格式化的 該庫封裝了些常見的具類函數(shù)，它也持npm包,通過模塊化的在些框架中使/*直接去cdn下載jutils-src件或者github上克隆到本地都可以*/v

24、ar date = jutils.formatDate(new Date(2019-10-11T05:04:02.506Z),YYYY-MM-DD HH:ii:ss); console.log(date); / 獲取年,時,分秒 2019-10-11 13:04:02/ 獲取時間戳,結(jié)束時間要于起時間var timeStamp = jutils.getTimeInterval(1567562605000, 1567649014000);console.log(timeStamp); / 1天0時0分鐘9秒復制代碼法六:使monentjs,第三庫進格式化的var dayTime0 = momen

25、t(1572728572986).format(YYYY-MM-DD HH:mm:ss);var dayTime1 = moment(2019-10-11T05:04:02.506Z).format(YYYY-MM-DD HH:mm:ss);var dayTime2 = moment(Fri Oct 11 2019 13:04:02 GMT+0800).format(YYYY-MM-DD HH:mm:ss); var dayTime3 = moment(Fri Oct 11 2019 13:04:02 GMT+0800).valueOf();console.log(dayTime0); / 2

26、019-11-0305:02:52console.log(dayTime1); / 2019-10-1113:04:02console.log(dayTime2); / 2019-10-1113:04:02console.log(dayTime3); / 1570770242000 復制代碼拓展:上介紹的些法都是將數(shù)字類型,正常期格式轉(zhuǎn)化為指定的期格式,但要是反過來?例如:些期控件,查詢某些條件時,需要選擇起 始時間和截時間,獲取時間戳,根據(jù)時間戳去查詢相應的結(jié)果的也就是:類似2019-10-11T05:04:02.506Z,Fri Oct 11 2019 13:04:02 GMT+0800或者2019-11-03 05:02:52,這樣的時間格式,轉(zhuǎn)換為數(shù)字/*getTime(),valueOf()這兩種式獲取的時間會精確到毫秒Date.parse的法只能精確到秒，毫秒將0來代替*/var date = new Date(2019-11-03 05:02:52); var time1 =