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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
javascript实现数独解法
Mar 14 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
浅谈JS的原型和继承
May 08 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
Java 生成随机字符的示例代码
Jan 13 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使用百度天气接口示例
2014/04/22 PHP
php实现分页显示
2015/11/03 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
一年级小学生评语
2014/04/22 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
MySQL约束超详解
2021/09/04 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技