前言
最近遇到一个需求,对于社区里讨论的帖子展示一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示xxx万,xx亿
对于后台返回该字段的数据类型是number,需要进行格式化数字的输出
这个应用场景在前端开发中其实很普遍,例如:音乐app里面音乐歌曲播放数量,微博里的点赞数,评论留言条数,页面的访问量,超大金额(千位符格式)处理,甚至时间格式转换等处理
下面就一起来看看怎么处理的
数字超大时-末尾添加相应的单位
需求:当后台接口返回一个较大的数字时,例如:1000,26742238,1234787325,低于6位数时,让数字完全显示,若高于4位,低于8位,给数字加相对应的单位,那么需要在前台做转换为2674.22万,12.34亿
示例代码如下所示:自己封装一个格式化函数
function tranNumber(num, point){
// 将数字转换为字符串,然后通过split方法用.分隔,取到第0个
let numStr = num.toString().split('.')[0]
if(numStr.length<6) {
// 判断数字有多长,如果小于6,,表示10万以内的数字,让其直接显示
console.log(numStr);
return numStr;
}else if(numStr.length>=6 && numStr.length<=8){
// 如果数字大于6位,小于8位,让其数字后面加单位万
let decimal = numStr.substring(numStr.length-4, numStr.length-4+point)
console.log(decimal);
// 由千位,百位组成的一个数字
return parseFloat(parseInt(num / 10000)+'.'+decimal)+'万'
}else if(numStr.length >8){
// 如果数字大于8位,让其数字后面加单位亿
let decimal = numStr.substring(numStr.length-8, numStr.length-8+point);
console.log(decimal);
return parseFloat(parseInt(num/100000000)+'.'+decimal)+'亿'
}
}
console.log(tranNumber(1000,2)) // 1000
console.log(tranNumber(26742238,2)) // 2674.22万
console.log(tranNumber(1234787325,2)) // 12.34亿
示例效果如下所示
当然对于小数点后面留几位,自己可以自定义的,如果那种计量页面浏览量,视频播放次数,以及点赞数,评论数,省略后面的数,其实没有什么
但是要注意的是:如果涉及到金额转账之类,那可不能随意舍掉的,不然的话,老板会找你问话的
数字千位符格式化
需求:所谓的数字千分位形式,是从个位数起，每三位之间加一个逗号,例如:1450068,经过处理之后:1,450,068
这在前端是一个非常常见的问题,后台返回一金额数字,前台拿到之后,要进行格式化处理,然后显示到页面上
方法一:利用字符串提供的toLocaleString()方法处理,此方法最简单
var num = 1450068;
console.log(num.toLocaleString()) // 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) 
