前言

最近遇到一个需求,对于社区里讨论的帖子展示一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示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) && 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();
    return numStr.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

综上所述:数字千位符格式化的方式有很多种方式,当然个人觉得最简单粗暴的方法就是toLocalString()方法,即使数字开始是0,这个方法也自动帮我们处理了的,实际开发中,强烈建议用第一种方式最好,后面的方法仅次

有时候,往往在面试时会被问到,除了最简单的一种方式,还有没有别的方式,其他方法是有些烧脑壳的

结合第三方库的使用

当你觉得自己编写这种格式化方法比较繁琐的时候,总有好用的工具已经帮我们实现了的

Numeral.js
官网及文档：http://numeraljs.com/
GitHub：https://github.com/adamwdraper/Numeral-js 它是一个用于格式化和操作数字的JavaScript库
下载具体的文件:bootcdn下载或者github下载都可以根据官方文档使用案例:直接使用即可
它也支持npm,在React,Vue等前端框架,甚至微信小程序里同样可以使用

<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>

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时间字段,但时间格式需要做处理

最终需要转换为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.log(d.toLocaleString()) // 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);
Date.prototype.toLocaleString = function() {
  return this.getFullYear() + "年" + (this.getMonth() + 1<10?'0'+this.getMonth()+1:this.getMonth()+1) + "月" + (this.getDate()<10?'0'+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年11月03日 05点02分52秒

当然在new Date()下面还有其他的一些方法,例如你只想要获得年,月,日可以使用toLocalDateString方法的

该方法是把本地时间把 Date 对象的日期部分转换为字符串,并返回结果

/*
*
* 使用时间对象下面的toLocaleDateString方法,但是此法只能获取到年,月,日,并不能得到时,分,秒

*/
var d = new Date(1572728572986);
console.log(d.toLocaleDateString()) // 2019/11/3

但是如果想要获取时,分,秒,可以使用toLocaleTimeString这个方法的,至于更多的一些API方法,大家可以在控制台下进行测试,也可以查看MDN文档的,如下gif所示的,如果有不清楚,顺便百度,谷歌的

方式二:利用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 = `${date.getFullYear()}-`;
var Month = `${ date.getMonth()+1<10? `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()}:`;
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,这种格式,你只需要改变拼接后面的连接符-替换成斜杠就可以了

这种方法是最直接也是没有什么逻辑可言的,使用系统内置的Date函数就可以实现的,但是复用性很差

方式三:同样也是使用new Date(),但是如果把它封装成一个函数,那么就可以随意调用了

/*
* 封装成一个时间格式化函数,formatDateTime函数的第一个形参time代表的是时间戳,第二个参数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|HH|mm|ss/g, function(a){
  switch(a){
    case 'yyyy':
      return tf(t.getFullYear()); // 获取年
      break;
    case 'MM':
      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()); // 获取秒
      break;
   }
 })
}
console.log(formatDateTime(1572728572986,"yyyy年-MM月-dd日 HH时:mm分:ss秒")); // 2019年-11月-03日 05时:02分:52秒

上面封装了一个formateDateTime函数,使用了一个switch语句,进行了格式化时间操作,第一个参数代表的是时间戳,第二个参数代表的是想要格式化什么样的形式

方式四:独立封装一个函数,放到utils工具函数里面去的,如果在一些框架中使用的话,可以通过export暴露出去,而在要使用的时间格式化的文件内上方通过import导入的

/*
* 封装时间格式化函数formatDateTime,date表示时间戳
*
*/
function formatDateTime(date){
  let fmt = 'yyyy-MM-dd hh:mm:ss' // 这里是指定的时间格式,你可以在后面加上年,月,日,时分,秒的,例如: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的话,则数字前面补个零
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, o[k].toString().length == 1 ? '0' + o[k] : o[k])
    }
  }
  // console.log(fmt)
  return fmt
}

console.log(formatDateTime(new Date(1572728572986))) // 2019-11-03 05:02:52
console.log(formatDateTime(new Date("2019-10-11T05:04:02.506Z"))) // 2019-10-11 13:04:02
console.log(formatDateTime(new Date("Fri Oct 11 2019 13:04:02 GMT+0800"))) // 这个是东八区时间格式,2019-10-11 13:04:02
export default formatDateTime;

归纳:上面的方法三与方法四,通过独立封装函数的方法,都是可以通过模块化导入导出进行使用的,这几种方式任意选择一种都可以,底层原理都是一样的,只不过实现的方式不一样而已

对于这种常用的工具类方法,在前端开发需求中的使用是很频繁的,一旦遇到了,自己写一个也没有什么问题,也可以百度,谷歌一下的,但发现有的一些例子是并不完整的,存在一些问题,有时也满足不了业务的需求 方法五:使用jutils第三方库进行格式化的 该库封装了一些常见的工具类函数，它也支持npm包,通过模块化的在一些框架中使用

具体使用可见:https://github.com/dong-sir/jutils,这个文档的

/*
*
* 直接去cdn下载jutils-src文件或者github上克隆到本地都可以
   
*/
<script src="https://cdn.jsdelivr.net/npm/jutils-src"></script>
      <script>
        var 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
        // 获取时间戳,结束时间要大于起止时间
        var timeStamp = jutils.getTimeInterval(1567562605000, 1567649014000);
        console.log(timeStamp); // 1天0小时0分钟9秒
      </script>

方法六:使用monentjs,第三方库进行格式化的

monentjs是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期,支持npm,也支持通过script标签的方式在浏览器中引入详细各个使用,可参考http://momentjs.cn/,官方手册,这在企业应用开发里,也是一个很常用的日期格式类库的

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>
    var dayTime0 = moment(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); // 2019-11-03 05:02:52
    console.log(dayTime1); // 2019-10-11 13:04:02
    console.log(dayTime2); // 2019-10-11 13:04:02
    console.log(dayTime3); // 1570770242000
</script>

拓展:

上面介绍的一些方法都是将数字类型,非正常日期格式转化为指定的日期格式,但要是反过来?例如:一些日期控件,查询某些条件时,需要选择起始时间和截止时间,获取时间戳,根据时间戳去查询相应的结果的

也就是:类似2019-10-11T05:04:02.506Z,Fri Oct 11 2019 13:04:02 GMT+0800或者2019-11-03 05:02:52,这样的时间格式,转换为数字

/*
* getTime(),valueOf()这两种方式获取的时间会精确到毫秒
* 而Date.parse的方法只能精确到秒，毫秒将用0来代替
*
*/
var date = new Date('2019-11-03 05:02:52');
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse('2019-11-03 05:02:52');
console.log(time1,time2,time3); // 1572728572000 1572728572000 1572728572000

var date = new Date('2019-10-11T05:04:02.506Z');
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse('2019-10-11T05:04:02.506Z');
console.log(time1,time2,time3);// 1570770242506 1570770242506 1570770242506

var date = new Date('Fri Oct 11 2019 13:04:02 GMT+0800');
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse('Fri Oct 11 2019 13:04:02 GMT+0800');
console.log(time1,time2,time3);// 1570770242000 1570770242000 1570770242000

getTime(),valueOf()这两种方式获取的时间会精确到毫秒
Date.parse的方法只能精确到秒，毫秒将用0来代替

当获取到时间戳之后,如果想要把数字转换为指定的时间格式,又可以使用上面的的任意一种方法了

需要注意的是:如果是获取到的是unix的时间戳,需要将得到的时间戳除以1000,便得到秒数

上面介绍的时间戳格式化的方法:都是可以的,这里我个人推荐方法三,四,五,六的,如果你不想转换,那就借用第三方库的.

结语

本文主要记录了一下使用js进行超大数字,金额显示处理,以及日期时间格式化处理的问题,对于这种常用工具类函数,可以自行收集起来的

遇到同类型的需求,要么自己手撸一个,要么就拿现有的轮子进行使用.一些常用的开发需求,基本上都有大牛提供了一些好用的第三方库,可以拿来主义,先实现当下需求,然后在研究其原理.当然手写理解其原理也很重要了