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 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
js实现打字小游戏
Dec 17 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
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python安装以及IDE的配置教程
2015/04/29 Python
浅谈Python 对象内存占用
2016/07/15 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
对pandas中apply函数的用法详解
2018/04/10 Python
pandas重新生成索引的方法
2018/11/06 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python实现简单颜色识别程序
2020/02/19 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
化工机械应届生求职信
2013/11/04 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
党支部换届选举方案
2014/05/08 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
PyTorch的Debug指南
2021/05/07 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript