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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
微信小程序 如何获取网络状态
Jul 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
让焦点自动跳转
2006/07/01 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
入党自我鉴定范文
2013/10/04 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
交通事故协议书
2014/04/15 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
护士节活动总结
2014/08/29 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
python实现简单区块链结构
2021/04/25 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis