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 word表格动态添加代码
Jun 07 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
vue 中filter的多种用法
Apr 26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 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通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
angular.bind使用心得
2015/10/26 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
Python命令行解析模块详解
2018/02/01 Python
python创造虚拟环境方法总结
2019/03/04 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Python如何实现线程间通信
2020/07/30 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
商业街策划方案
2014/05/31 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
社会实践活动报告
2015/02/05 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
员工聘用合同范本
2015/09/21 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python