JavaScript数值千分位格式化的两种简单实现方法


Posted in Javascript onAugust 01, 2016

在对数值进行格式化的时候,一个常见的问题是按照千分位格式化,网上对这个问题已经有很多种解决方法了,还可以利用Array.prototype.reduce方法来实现千分位格式化。

function formatNumber(num) { 
  if (isNaN(num)) { 
    throw new TypeError("num is not a number"); 
  } 
 
  var groups = (/([\-\+]?)(\d*)(\.\d+)?/g).exec("" + num), 
    mask = groups[1],            //符号位 
    integers = (groups[2] || "").split(""), //整数部分 
    decimal = groups[3] || "",       //小数部分 
    remain = integers.length % 3; 
 
  var temp = integers.reduce(function(previousValue, currentValue, index) { 
    if (index + 1 === remain || (index + 1 - remain) % 3 === 0) { 
      return previousValue + currentValue + ","; 
    } else { 
      return previousValue + currentValue; 
    } 
  }, "").replace(/\,$/g, ""); 
  return mask + temp + decimal; 
}

Array的reduce方法在IE9以下不支持,不过,我们可以基于ECMAScript 3来实现一个reduce方法。

在JavaScript中,字符串的replace方法的匹配模式参数除了字符串以外还可以是一个正则表达式,下面是利用String.prototype.replace方法来实现千分位格式化的具体代码:

function formatNumber(num) { 
  if (isNaN(num)) { 
    throw new TypeError("num is not a number"); 
  } 
 
  return ("" + num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");  
}

(\d{1,3})是一个捕获分组,可以用$1来反向引用,?=(\d{3})+(?:$|\.)是正向断言,表示匹配1到3个数字后面必须跟3个数字,但不含最后的3个数字或者3个数字和小数点。

以上这篇JavaScript数值千分位格式化的两种简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js indexOf()定义和用法
Oct 21 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 #Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 #Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 #Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 #Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 #Javascript
js添加千分位的实现代码(超简单)
Aug 01 #Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php将金额数字转化为中文大写
2015/07/09 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
js调用flash的效果代码
2008/04/26 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
js时间控件只显示年月
2017/01/08 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
初步解析Python下的多进程编程
2015/04/28 Python
详解Python中find()方法的使用
2015/05/18 Python
python中PIL安装简单教程
2016/04/21 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python操作MongoDB详解及实例
2017/05/18 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
升职自荐信
2013/11/28 职场文书
有关环保的标语
2014/06/13 职场文书
治庸问责工作总结
2015/08/11 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
java中如何截取字符串最后一位
2022/07/07 Java/Android