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删除数组元素的函数介绍
Mar 27 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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
如何选购合适的收音机
2021/03/01 无线电
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
phpwind放自动注册方法
2006/12/02 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
详解React 条件渲染
2020/07/08 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python Requests 基础入门
2016/04/07 Python
详解python中的Turtle函数库
2018/11/19 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
企业行政文员岗位职责
2013/12/03 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
导游个人求职信范文
2014/03/23 职场文书
联片教研活动总结
2014/07/01 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python