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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
要账委托书范本
2014/09/15 职场文书
小学数学教学反思范文
2016/02/16 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
Python中itertools库的四个函数介绍
2022/04/06 Python