finereport格式化⾦额函数_js中进⾏数字，超⼤⾦额（千位符）
格式化处理
前⾔
最近遇到⼀个需求，对于社区⾥讨论的帖⼦展⽰⼀个访问量的计数显⽰问题，当超过多少页⾯访问量时，就让其显⽰xxx万,xx亿
对于后台返回该字段的数据类型是 number，需要进⾏格式化数字的输出
这个应⽤场景在前端开发中其实很普遍，例如:⾳乐app⾥⾯⾳乐歌曲播放数量，微博⾥的点赞数，评论留⾔条数，页⾯的访问量，超⼤⾦额(千位符格式)处理，甚⾄时间格式转换等处理
下⾯就⼀起来看看怎么处理的
数字超⼤时-末尾添加相应的单位
需求：当后台接⼝返回⼀个较⼤的数字时，例如:1000,26742238,1234787325，低于6位数时，让数字完全显⽰，若⾼于4位，低于8位，给数字加相对应的单位，那么需要在前台做转换为2674.22万,12.34亿
⽰例代码如下所⽰:⾃⼰封装⼀个格式化函数
function tranNumber(num, point){
// 将数字转换为字符串，然后通过split⽅法⽤.分隔，取到第0个
let numStr = String().split('.')[0]
if(numStr.length<6) { // 判断数字有多长，如果⼩于6,，表⽰10万以内的数字，让其直接显⽰
console.log(numStr);
return numStr;
}el if(numStr.length>=6 && numStr.length<=8){ // 如果数字⼤于6位,⼩于8位，让其数字后⾯加单位万
let decimal = numStr.substring(numStr.length-4, numStr.length-4+point)
console.log(decimal);
// 由千位，百位组成的⼀个数字
return parFloat(parInt(num / 10000)+'.'+decimal)+'万'
}el if(numStr.length >8){ // 如果数字⼤于8位，让其数字后⾯加单位亿
let decimal = numStr.substring(numStr.length-8, numStr.length-8+point);
console.log(decimal);
return parFloat(parInt(num/100000000)+'.'+decimal)+'亿'
}
}
console.log(tranNumber(1000,2)) // 1000
console.log(tranNumber(26742238,2)) // 2674.22万
console.log(tranNumber(1234787325,2)) // 12.34亿
⽰例效果如下所⽰
格式化数字.png
当然对于⼩数点后⾯留⼏位,⾃⼰可以⾃定义的，如果那种计量页⾯浏览量，视频播放次数，以及点赞数，评论数，省略后⾯的数，其实没有什么
但是要注意的是：如果涉及到⾦额转账之类，那可不能随意舍掉的，不然的话,⽼板会找你问话的
数字千位符格式化
需求：所谓的数字千分位形式，是从个位数起，每三位之间加⼀个逗号，例如:1450068，经过处理之后:1,450,068
这在前端是⼀个⾮常常见的问题，后台返回⼀⾦额数字，前台拿到之后，要进⾏格式化处理，然后显⽰到页⾯上
⽅法⼀：利⽤字符串提供的toLocaleString()⽅法处理，此⽅法最简单
var num = 1450068;
console.LocaleString()) // 1,450,068
⽅法⼆：截取末尾三个字符的功能可以通过字符串类型的slice、substr或substring⽅法做到
/*
slice() ⽅法可从已有的数组中返回选定的元素，截取数组的⼀个⽅法
*/
function toThousandsNum(num) {
var num = (num || 0).toString(),
result = '';
while (num.length > 3) {
//此处⽤数组的slice⽅法，如果是负数，那么它规定从数组尾部开始算起的位置
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
// 如果数字的开头为0，不需要逗号
if (num){
result = num + result
}
return result;
}
console.log(toThousandsNum(000123456789123)) // 123,456,789,123
⽅法三：把数字通过toString，转换成字符串后，打散为数组，再从末尾开始，逐个把数组中的元素插⼊到新数组(result)的开头，每插⼊⼀个元素，counter就计⼀次数(加1)，当counter为3的倍数时，利⽤取余的⽅式，就插⼊⼀个逗号，但是要注意开头(i为0时)不需要逗号。最后通过调⽤新数组的join⽅法得出结果
如下代码所⽰
function toThousands(num) {
var result = [],
counter = 0;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result.unshift(num[i]);
if (!(counter % 3) && i != 0) {
result.unshift(',');
}
}
return result.join('');
儿童空间
}
console.log(toThousands(236471283572983412)); // 236,471,283,572,983,420
⽅法四：不把字符串打散为数组，始终对字符串操作，下⾯的这种操作字符串的⽅式是对上⾯的改良
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(toThousands(42371582378423)) // 42,371,582,378,423
⽅法五：正则表达式，此⽅法个⼈觉得⽐较难以理解,⽹上⼤⽜写的
function toThousands(num) {
家能
var numStr = (num || 0).toString();
place(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
综上所述：数字千位符格式化的⽅式有很多种⽅式，当然个⼈觉得最简单粗暴的⽅法就是toLocalString()⽅法，即使数字开始是0，这个⽅法也⾃动帮我们处理了的，实际开发中，强烈建议⽤第⼀种⽅式最好，后⾯的⽅法仅次
有时候，往往在⾯试时会被问到，除了最简单的⼀种⽅式，还有没有别的⽅式，其他⽅法是有些烧脑壳的
结合第三⽅库的使⽤
当你觉得⾃⼰编写这种格式化⽅法⽐较繁琐的时候，总有好⽤的⼯具已经帮我们实现了的
Numeral.js
下载具体的⽂件:bootcdn下载或者github下载都可以 根据官⽅⽂档使⽤案例：直接使⽤即可
它也⽀持npm，在React,Vue等前端框架，甚⾄微信⼩程序⾥同样可以使⽤
var string = numeral(1634600).format('0,0');
console.log(string); // 1,634,600
具体详细使⽤，可参照官⽅⼿册⽂档 这个库在githu上的star有七千多的，说明使⽤的⼈还是挺多的
如果仅仅是⼀个⼩⼩的功能数字的转换，引⼊⼀个库进去，未免有些⼤才⼩⽤了，这个库不仅仅格式化数字，格式化成时间，货币，百分⽐,⼏位⼩数，以及千分位.
时间戳转换为指定的⽇期时间格式
在前端UI界⾯显⽰中，后台往往返回了⼀个时间戳格式，可能是⼀串数字或者⼀些⾮正常的显⽰格式，这时，在前台处理时，往往需要进⾏时间格式化的处理
例如：前台得到这样的⼀时间格式:1572728572986或者2019-10-11T05:04:02.506Z等格式
这⾥以微信⼩程序云开发为例，通过前台往数据库⾥插⼊⼀个时间createTime字段，最终要以指定的格式显⽰到页⾯上
前台拿到该createTime时间字段，但时间格式需要做处理
image
最终需要转换为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对象转换为字符串，并返回结果，如果new Date()没有接收任何参数，它会返回当下时刻的时间
/*
* 使⽤toLocaleString()⽅法
* 可根据本地时间把 Date 对象转换为字符串，并返回结果
*
*/
var d = new Date(1572728572986);
console.LocaleString()) // 2019/11/3 上午5:02:52
当然你现在看到的与我们指定想要的结果不⼀致，例如：输出这样的格式的 2019年11⽉03⽇ 05点02分52秒，代码如下所⽰：如果你想要输出格式如上⽂中⼀样的，只需要把拼接的连字符替换掉成你⾃⼰想要的格式就可以了的
*
* 这种⽅法是直接改变Date的原型下⾯的⽅法，这样也是可以的
跑姿* getFullYear,getMonth,getDate,getMinutes,getHours,getMinutes,getSeconds⽅法，获取年,⽉,⽇，时，分，秒
* 利⽤字符串+加号拼接起来，如果你觉得+号拼接字符串很不舒服，也可以⽤Es6中的模板字符串⽅法的`${变量}`
*
*
*/
var d = new Date(1572728572986);
LocaleString = function() {
FullYear() + "年" + (Month() + 1<10?'0'+Month()+Month()+1) + "⽉" + (Date() <10?'0'+Date():Date()) + "⽇ " + (Hours()<10?'0'+Hours():Hours()) + "点" +
(Minutes()<10?'0'+Minutes():Minutes()) + "分" + (Seconds()
<10?'0'+Seconds():Seconds()) + "秒";
};
console.LocaleString()); // 2019年11⽉03⽇ 05点02分52秒
当然在new Date()下⾯还有其他的⼀些⽅法，例如你只想要获得年,⽉,⽇可以使⽤toLocalDateString⽅法的
该⽅法是把本地时间把 Date 对象的⽇期部分转换为字符串，并返回结果
/*
晚礼*
* 使⽤时间对象下⾯的toLocaleDateString⽅法，但是此法只能获取到年,⽉,⽇，并不能得到时，分，秒
*/
var d = new Date(1572728572986);
console.LocaleDateString()) // 2019/11/3
但是如果想要获取时，分，秒，可以使⽤toLocaleTimeString这个⽅法的,⾄于更多的⼀些API⽅法,⼤家可以在控制台下进⾏测试，也可以查看MDN⽂档的，如下gif所⽰的，如果有不清楚，顺便百度,⾕歌的
image
⽅式⼆：利⽤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中的模板字符串，反引号,⾥⾯直接可以写变量，避免了使⽤+加号做字符串的拼接，同时当⽇,⽉,⼩时，分钟，秒⼩于10时，做了⼀个补零的操作
*/
var date = new Date(1572728572986);清热的水果
var Year = `${FullYear()}-`;
