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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
Position属性之relative用法
Dec 14 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
微信小程序自定义胶囊样式
Dec 27 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
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue实现分页加载效果
2019/12/24 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
机械生产实习心得体会
2016/01/22 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
docker 制作mysql镜像并自动安装
2022/05/20 Servers