前言在前端开发中,我们经常会遇到这样的需求,使用Jascript对数字进行格式化输出。最常见的是金额。比如人民币的最小单位是分钟,一般需要精确到小数点后两位,整数位每三位需要用逗号隔开。
今天我们就来看看如何使用原生Jascript和开源类库来实现这样一个功能。
有兴趣的可以去github看看源代码,github地址是:
https://github . com/zhouxiong king/article-pages/blob/master/articles/format number/format number . js
ja描述语言
原生JS实现方法1
首先我们来看最简单的实现方法,需要达到这个目的。
输入一串数字或字符串,最后返回格式化后的字符串,每3位用逗号隔开,小数点后用四舍五入法保留2位。
我们来分析一下方法的实现过程。
替换可能出现的原始输入数据& # 39;$'和’,’,然后判断是否是数字。
确定传入号码是正数还是负数。
判断小数位的四舍五入。
每三位数加一个逗号。
重新连接字符串,符号+整数+小数+小数。
根据上面的分析过程,得到的代码如下。
方法1
原生JS实现方法2
第二种实现方法可以选择保留小数位,如下。
将传入的数字或字符串转换为浮点数据,并将其四舍五入。
除以小数点并反转整数位。
对于整数,每三个数字加一个逗号。
再次颠倒顺序以获得正确的整数位,然后拼接小数位数。
通过以上分析,代码如下。
方法2
原生JS实现方法3
方法3中,是最全面的实现,可以选择上、下或四舍五入保留小数位;同时可以选择小数点符号和千位符号。
为了让方法的代码看起来更清晰,方法被拆分成两个函数,每个函数实现自己的函数。
第一个函数,作为入口函数,主要包括小数位的处理,千位符号位的处理,最后返回结果的处理。
主函数
第二个函数的主要作用是根据传递的参数对数字进行四舍五入。
第二个功能
对于以上方法,我们可以通过代码测试。
试验结果
开源库
这里也推荐两个非常有用的开源库,digital . js和accounting.js,可以格式化货币、百分比、时间、小数点后几位、千分之一等等。
digital . js的github地址是:
https://github.com/adamwdraper/Numeral-js
目前Github上已经有超过5K的明星,而且呈增长趋势。
accounting.js的github地址是:
https://github.com/openexchangerates/accounting.js
目前,github上有超过3K的明星,可以说是非常受欢迎。
下面简单介绍一下Numeral.js的用法
使用
在浏览器中使用,可以通过下面的代码实现。
使用
格式化
将数字传递给numeral,然后通过format方法设置数字的格式。
格式化数字
数字格式的规则如下。
数字格式规则
其他格式规则,如货币、字节、百分比、时间、科学计数等。可以去官网看看。
结束语
今天这篇文章主要讲解如何将数字格式化成指定的格式,包括原生的JS实现和后面推荐的几个开源类库,希望对大家有所帮助。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。