JavaScript数值千分位格式化的两种简单实现方法

在对数值进行格式化的时候，一个常见的问题是按照千分位格式化，网上对这个问题已经有很多种解决方法了，还可以利用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数值千分位格式化的两种简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS 添加千分位与去掉千分位的示例

    复制代码 代码如下: function commafyback(num) { var x = num.split(','); return parseFloat(x.join("")); } function commafy(num) { num = num.toFixed(2) +""; var re=/(-?/d+)(/d{3})/ while(re.test(num)){ num=num.replace(re,"$1,$2"); } ret

  • js 实现数值的千分位及保存小数方法(推荐)

    实例如下: /** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousand 是否需要千分位 0:不需要,1:需要(数值类型); * @return 格式的字符串,如'1,234,567.45' * @type String */ function formatNumber(num,cent,isThousand) { num = num.toString(

  • Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）

    在项目里碰到需要把类似'450000'的数字转换为会计记账所用的格式,'450,000.00',分隔千分位和小数点后不够两位数时自动补齐,已下记录几种实现的方式 ps:如果不考虑后面的小数点,最快捷的方法: "12345678".replace(/[0-9]+?(?=(?:([0-9]{3}))+$)/g,function(a){return a+','}); //输出 12 345 678 1.用循环的方式实现 function formatNum(str){ var newStr

  • 千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码

    最近做项目需要我们前端对金额进行千分位格式化(也就是说每三位用逗号隔开),代码已经做了修改  之前的版本是本人疏忽 真对不住大家了!现在已经做了修改 如果还有不完善的地方 请大家多多指教! 1. 支持用逗号隔开 0-9位 逗号隔开 JS代码如下: 复制代码 代码如下: /**         * JS格式化         * @param number 要格式化的数字         * @param d [0-9]位 逗号隔开         */ function numFormat(nu

  • JS实现数字格式千分位相互转换方法

    实例如下: /** * 数字格式转换成千分位 *@param{Object}num */ function commafy(num){ if((num+"").Trim()==""){ return""; } if(isNaN(num)){ return""; } num = num+""; if(/^.*\..*$/.test(num)){ varpointIndex =num.lastIndexOf(&

  • js格式化金额可选是否带千分位以及保留精度

    js格式化金额,可选是否带千分位,可选保留精度,也是网上搜到的,但是使用没问题 复制代码 代码如下: /* 将数值四舍五入后格式化. @param num 数值(Number或者String) @param cent 要保留的小数位(Number) @param isThousand 是否需要千分位 0:不需要,1:需要(数值类型); @return 格式的字符串,如'1,234,567.45' @type String */ function formatNumber(num,cent,isT

  • js实现千分符和保留几位小数的简单实例

    js实现千分符转化 function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''; var l = s.split('.') [0].split('').reverse(), r = s.split('.') [1]; var t = ''; for (var i = 0; i < l.lengt

  • JS的千分位算法实现思路

    复制代码 代码如下: function commafy() { var num = document.getElementById("NumA").value; //1.先去除空格,判断是否空值和非数 num = num + ""; num = num.replace(/[ ]/g, ""); if (num == "") { alert("空值,结束"); return; } if (isNaN(num)

  • js添加千分位的实现代码(超简单)

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript"> function comdify(n){ var re=/\d{1,3}(?=(\d{3})+$)/g; var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;}); re

  • JavaScript数值千分位格式化的两种简单实现方法

    在对数值进行格式化的时候,一个常见的问题是按照千分位格式化,网上对这个问题已经有很多种解决方法了,还可以利用Array.prototype.reduce方法来实现千分位格式化. function formatNumber(num) { if (isNaN(num)) { throw new TypeError("num is not a number"); } var groups = (/([\-\+]?)(\d*)(\.\d+)?/g).exec("" + nu

  • JS数字千分位格式化实现方法总结

    本文实例讲述了JS数字千分位格式化实现方法.分享给大家供大家参考,具体如下: 用js实现如下功能,将给定的数字转化成千分位的格式,如把"10000"转化成"10,000",并考虑到性能方面的因素. 一.首先想到的办法,将数字转换为字符串(toString())再打散成数组(split),如果直接数字转换为数组,就是一整个放进去了,不能单独取到每一位.然后通过循环,逐个倒着把数组中的元素插入到新数组的开头(unshift),第三次或三的倍数次,插入逗号,最后把新数组拼

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

  • Javascript使用function创建类的两种方法(推荐)

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它

  • JavaScript判断数组重复内容的两种方法(推荐)

    JavaScript判断数组重复内容的两种方法(推荐)

    前言 一般,我们可能会给数组去重,这个操作并不复杂,执行一个循环就是了.现在,我要做的是,判断数组中是否有重复的内容,如果有,返回 true 否则,返回 false. 思路 把数组变成字符串 循环原数组,拿每一个字段和这个字符串进行比对,看是否有重复 如何拿A字符串和B字符串进行对比,并且要求判断出B字符串中包含过个A字符串呢? 方法一 indexOf() 和 lastIndexOf() 对比法. 首先,我们构建代码: var arr = ["aa","bb",&q

  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style

  • JavaScript判断对象和数组的两种方法

    在调用后端接口时,由于后端接口的不规范统一,接口最外层在没有数据时返回的是空数组(其实更想要的是空json对象),而在有数据时返回的是json对象,所以在接收到后端返回的接口时就需要首先判断返回的数据是对象还是数组,这里提供一些方法  方法一: //判断是否为数组 function isArray(obj) { return obj instanceof Array; } //判断是否为对象 function isObject(obj) { return obj instanceof Objec

  • springboot全局日期格式化的两种方式

    方式一是配置参数 参数配置的方式就是在json序列化的时候,当字段为日期类型的时候的format类型,就相当于在所有日期字段上加了一个注解 @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss"),但是每个字段都加注解太麻烦,所以直接使用全局配置来实现 参数配置也分为两种配置 第一种是yml的配置 spring: jackson: #参数意义: #JsonInclude.Include.A

  • 详解JavaScript发送埋点请求的两种方式

    详解JavaScript发送埋点请求的两种方式

    目录 一.用法 1.动态创建<img> 2.动态创建<script> 二.区别 区别1 区别2 三.选择哪种方式 四.总结 对于统计页面数据这样的情景(俗称埋点),我们常用的方式就是动态创建<img>或<script>,至于原因,一般有以下几点: 1.埋点一般不用关心请求的结果 2.可以实现跨域请求 3.无需使用ajax就能达到发请求的目的 4.都是原生实现,兼容性好 现就两种方式做一下对比和总结: 一.用法 1.动态创建<img> 方式1:通过

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

随机推荐