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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 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
处理单名多值表单的详解
2013/06/08 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
浅说js变量
2011/05/25 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python实现单向链表详解
2018/02/08 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
简单介绍python封装的基本知识
2019/08/10 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
夜大自我鉴定
2013/10/31 职场文书
办理信用卡工作证明
2014/01/11 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
2014年国庆节寄语
2014/09/19 职场文书
感谢信
2019/04/11 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
MySQL开启事务的方式
2021/06/26 MySQL
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
数据设计之权限的实现
2022/08/05 MySQL