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 相关文章推荐
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
js date 格式化
Feb 15 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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适配器模式介绍
2012/08/14 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python3模拟登录操作实例分析
2019/03/12 Python
django最快程序开发流程详解
2019/07/19 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
给分销商的致歉信
2014/01/14 职场文书
英语老师推荐信
2014/02/26 职场文书
淘宝店策划方案
2014/06/07 职场文书
商务英语专业求职信
2014/06/26 职场文书
大学四年个人总结
2015/03/03 职场文书
保研推荐信范文
2015/03/25 职场文书
2016新年晚会开场白
2015/12/03 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android