js 格式化数字（每三位加逗号）

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了js 格式化数字（每三位加逗号），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<div class="bar">
<div class="tools">

 转载：http://blog.csdn.net/sushauai/article/details/52958162 侵删
    方法一  
  1. unction toThousands(num) {  
  3.     num = (num || 0).toString().split(
  4. = 0; i--) {  
  5.         counter++;  
  7.         
  9.     

方法一的执行过程就是把数字转换成字符串后，打散为数组，再从末尾开始，逐个把数组中的元素插入到新数组（result）的开头。每插入一个元素，counter就计一次数（加1），当counter为3的倍数时，就插入一个逗号，但是要注意开头（i为0时）不需要逗号。最后通过调用新数组的join方法得出结果。

方法一比较清晰易懂，也在项目中用了一段时间。但是直觉告诉我，它的性能并不好。

方法二——方法一的字符串版

Highlighter bg_javascript">
[javascript] 
 
    方法二  
  1. unction toThousands(num) {  
  3.     num = (num || 0).toString();  
  4. = 0; i--) {  
  5.         counter++;  
  7.         
  9.     

方法二是方法一的改良版，不把字符串打散为数组，始终对字符串操作。

方法三——循环匹配末尾的三个数字

<div class="dp-Highlighter bg_javascript">
<div class="bar">
<div class="tools">
[javascript] <a class="ViewSource" title="view plain" href="http://blog.csdn.net/sushauai/article/details/52958162#" target="_blank">view plain<span data-mod="popu_168"><span data-mod="popu_168"> <a class="CopyToClipboard" title="copy" href="http://blog.csdn.net/sushauai/article/details/52958162#" target="_blank">copy

 
    方法三  
  1. unction toThousands(num) {  
  3.     
  5.         
  7.             num = RegExp.leftContext;  
  9.             num = 
  11.         }  
  13.     
  15. }  

方法三是完全不同的算法，通过正则表达式循环匹配末尾的三个数字，每匹配一次，就把逗号和匹配到的内容插入到结果字符串的开头，然后把匹配目标（num）赋值为还没匹配的内容（RegExp.leftContext）。此外，还要注意：

1.如果数字的位数是3的倍数时，最后一次匹配到的内容肯定是三个数字，但是最前面的三个数字前不需要加逗号；2.如果数字的位数不是3的倍数，那num变量最后肯定会剩下1到2个数字，循环过后，要把剩余的数字插入到结果字符串的开头。

虽然方法三减少了循环次数（一次循环处理三个字符），但由于用到了正则表达式，一定程度上增加了消耗。

方法四——方法三的字符串版

Highlighter bg_javascript">
[javascript] 
 
    方法四  
  1. unction toThousands(num) {  
  3.      3) {  
  5.         num = num.slice(0, num.length - 3);  
  7.     
  9. }  

事实上，截取末尾三个字符的功能可以通过字符串类型的slice、substr或substring方法做到。这样就可以避免使用正则表达式。

方法五——分组合并法

Highlighter bg_javascript">
[javascript] 
 
    方法五  
  1. unction toThousands(num) {  
  3.     
  5.             num = 
  7.         
  9.             
  11.     

先把数字的位数补足为3的倍数，通过正则表达式，将其切割成每三个数字一个分组，再通过join方法添加逗号，最后还要把补的0移除。

方法六——懒人法

Highlighter bg_javascript">
[javascript] 
 
    方法六  
  1. unction toThousands(num) {  
  3. }  

一直觉得这个格式化是可以通过一条正则表达式替换做出来的，但是需要用到断言等写法，无奈自己对这部分不太熟。Google了一下，还真找到了这么一条正则表达式，这估计是代码最短的实现。

测试结果

</tr>
<tr>
<td>10</td>
<td>14</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>7</td>
<td>2</td>

</tr>
<tr>
<td>100</td>
<td>12</td>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>3</td>

</tr>
<tr>
<td>1000</td>
<td>13</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>9</td>
<td>5</td>

</tr>
<tr>
<td>10000</td>
<td>21</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>6</td>
<td>3</td>

</tr>
<tr>
<td>100000</td>
<td>21</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6</td>

</tr>

方法一和方法二的强烈对比表明，字符串操作的效率比数组操作的效率要高得多；方法六的测试结果告诉我们，代码长短跟性能高低没有关系。方法四的综合性能是最好的（但为何num为100的时候，性能有所降低呢，这个实在不解），主要原因是：

1.对比方法一、二，每次操作3个字符而不是1个字符，减少循环次数；2.对比方法三、五、六，没有使用正则表达式，减少了消耗。

最后，我选择了方法四作为最终的优化方案。各位读者如有更好的实现方法或改良意见，可以发表评论。

原文链接：https://www.f2er.com/js/73982.html

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作
方法一 方法二 方法三 方法四 方法五 方法六