Javascript每日一学-如何使用Javascript格式化数字,金额

在前端开发中经常会遇到这样一种需求,使用Javascript格式化数字进行输出。最常见的是金额,比如人民币最小表示单位为分,一般需要精确到小数点后两位数字,而且整数位每隔三位数字需要用逗号隔开。

今天我们就一起来看看如何使用原生Javascript和开源类库来实现这样一种功能吧。

感兴趣的可以自行去github上去看源码,github地址为:

https://github.com/zhouxiongking/article-pages/blob/master/articles/formatNumber/formatNumber.js

原生JS实现方法1

首先我们看看最简单的实现方法,需要达到这样的目的。

输入一串数字或者字符串,最后返回格式化后的字符串,每隔3位用逗号分隔,通过四舍五入保留小数点后2两位。

我们来分析下方法的实现过程。

替换掉原本传入数据中可能出现的'$'和',',然后判断是否为数字。

判断传入的数字是正数还是负数。

判断小数位数的舍入性。

每隔三位,添加一个逗号。

重新拼接字符串,正负号+整数位+小数点+小数位

根据上述的分析过程,得到的代码如下。

方法1

原生JS实现方法2

第二种实现方法可以选择保留小数位数,它的做法如下。

将传入的数字或者字符串转化为float类型数据,并进行四舍五入

用小数点进行分割,并将整数位逆序

对于整数位,每隔三位添加一个逗号

再次进行逆序,得到正确的整数位后拼接小数位。

通过上述的分析,得到代码如下。

方法2

原生JS实现方法3

方法3中,是一个最全面的实现,可以选择向上,向下或者四舍五入来保留小数位数;同时可以选择小数点符号和千分位符号。

为了让方法的代码看起来更清晰,将方法拆分成两个function,每个function实现自己的功能。

第一个function作为入口函数,主要包含小数位的处理,千分位符号位的处理,以及最后返回结果的处理。

主function

第二个function的主要功能是根据传入的参数对数字进行取整或者四舍五入。

第二个function

针对以上的方法,我们可以通过代码测试。

测试结果

开源库

在这里也推荐两款非常好用的用于格式化数字的开源库Numeral.js和accounting.js,两者都可以格式化货币,百分比,时间,几个小数位数,千分位等等

Numeral.js的github地址为:

https://github.com/adamwdraper/Numeral-js

目前在Github上超过5K的star,而且呈现增长的趋势。

accounting.js的github地址为:

https://github.com/openexchangerates/accounting.js

目前在github上有超过3K的star,可以说是非常受欢迎。

这里简要介绍下Numeral.js的用法。

使用

在浏览器中使用,可以通过以下代码去实现。

使用

格式化

通过给numeral传递数字,然后通过format方法进行数字的格式化。

格式化数字

数字格式化的规则如下。

数字格式化规则

其他的类似于货币,字节,百分数,时间,科学计数等的格式化规则大家可以去官网看看。

结束语

感兴趣的可以关注下小编噢,小编会持续输出更多优质的文章的。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180622G1O4EH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券