js中进行数字,超大金额(千位符)格式化处理

时间  2020-01-09
标签 进行 数字 超大 金额 千位 格式化 处理 栏目 JavaScript 繁體版
原文   原文链接

前言

最近遇到一个需求,对于社区里讨论的帖子展现一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示xxx万,xx亿css

对于后台返回该字段的数据类型是number,须要进行格式化数字的输出前端

这个应用场景在前端开发中其实很广泛,例如:音乐app里面音乐歌曲播放数量,微博里的点赞数,评论留言条数,页面的访问量,超大金额(千位符格式)处理,甚至时间格式转换等处理git

下面就一块儿来看看怎么处理的github

数字超大时-末尾添加相应的单位

需求:当后台接口返回一个较大的数字时,例如: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亿
复制代码

示例效果以下所示 数据库

格式化数字.png
固然对于小数点后面留几位,本身能够自定义的,若是那种计量页面浏览量,视频播放次数,以及点赞数,评论数,省略后面的数,其实没有什么

可是要注意的是:若是涉及到金额转帐之类,那可不能随意舍掉的,否则的话,老板会找你问话的npm

数字千位符格式化

需求:所谓的数字千分位形式,是从个位数起，每三位之间加一个逗号,例如: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

  • 官网及文档：numeraljs.com/

  • GitHub：github.com/adamwdraper… 它是一个用于格式化和操做数字的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包,经过模块化的在一些框架中使用

具体使用可见:github.com/dong-sir/ju…

/*
*
* 直接去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进行超大数字,金额显示处理,以及日期时间格式化处理的问题,对于这种经常使用工具类函数,能够自行收集起来的

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程