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 相关文章推荐
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
深入探寻javascript定时器
Jan 02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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个人网站架设连环讲(一)
2006/10/09 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
基于Python实现简单学生管理系统
2020/07/24 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
幼儿园元旦活动感言
2014/03/02 职场文书
路政管理求职信
2014/06/18 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
金秋助学感谢信
2015/01/21 职场文书
2015年市场部工作总结
2015/04/30 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python