js代码格式化 格式化HTML代码的JS代码

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

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

有兴趣的可以去github看看源代码,github地址是:

https://github . com/zhouxiong king/article-pages/blob/master/articles/format number/format number . js

js代码格式化 格式化HTML代码的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实现和后面推荐的几个开源类库,希望对大家有所帮助。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论