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让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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 数组教程 定义数组
2009/10/23 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php事件驱动化设计详解
2016/11/10 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
JavaScript中的类继承
2010/11/25 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
two.js之实现动画效果示例
2017/11/06 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
Element Input组件分析小结
2018/10/11 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
Django restframework 源码分析之认证详解
2019/02/22 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python二元表达式用法
2019/12/04 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python怎么对数字进行过滤
2020/07/05 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
公司财务工作总结的自我评价
2013/11/23 职场文书
销售顾问岗位职责
2014/02/25 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书