zoukankan      html  css  js  c++  java
  • JS将数字格式化成金融数字样式(千位分隔符,三位一个逗号间隔)

    现在有这样一个需求

    客户想要这个111222333444数字显示成这样111,222,333,444,即3个数字通过,分割,这也是金融上面经常出现的数字格式

    方法一【原生】:我们需要两步操作:

    这个方法最为简单,使用JS原生实现。toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。如果是浮点数,只保留小数点后三位数,并进行了四舍五入。如果对结果要求不高,这个算是最简单的实现。

    <script>
    
    function thousands(num){
        return num.toLocaleString();
    }
    
    alert(thousands(1234567.1234567));
    alert(thousands(7654321));
    
    </script>
    

    方法二【正则表达式】:

    <script>
    
    function thousands(num){
            var str = num.toString();
            var reg = str.indexOf(".") > -1 ? /(d)(?=(d{3})+.)/g : /(d)(?=(?:d{3})+$)/g;
            return str.replace(reg,"$1,");
    }
    
    alert(thousands(1234567.1234567));
    alert(thousands(7654321));
    
    </script>
    

    利用正则表达式,也是代码量较少的一种方法。如果仅考虑整数,或指定位数的小数,可以更加简洁:

    保留两位小数

    num.toFixed(2).toString().replace(/(d)(?=(d{3})+.)/g,"$1,");
    

    保留整数

    num.toFixed(0).toString().replace(/(d)(?=(?:d{3})+$)/g,"$1,");
    

    方法三【字符串打散】:

    把数字分成整数和小数两部分,然后把整数部分差成单字符数组,反向排列后每3位插入一个逗号(因为逗号是从后向前加)。然后再一次反向排列并合成字符串,加上小数部分就完成了。

    <script>
    
    function thousands(num){
    	var splits=[],res=[];
    	var splits = num.toString().split(".");
    	splits[0].split("").reverse().map(function(item,i){
    		if(i%3 == 0 && i!=0){ res.push(","); }
    		res.push(item);
    	});
    	return res.reverse().join("")+(splits.length>1 ? "."+splits[1] : "");
    }
    
    alert(thousands(1234567.1234567));
    alert(thousands(7654321));
    
    </script>
    

    如果有保留小数位数的要求,以上方法都可以对参数 num 使用 toFixed(n) 方法,toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。参数 n 规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。

    例如,保留两位小数:

    <script>
    
    function thousands(num){
    	num = num.toFixed(2);//保留两位小数
            var str = num.toString();
            var reg = str.indexOf(".") > -1 ? /(d)(?=(d{3})+.)/g : /(d)(?=(?:d{3})+$)/g;
            return str.replace(reg,"$1,");
    }
    
    alert(thousands(1234567.1234567));
    
    </script>
    
  • 相关阅读:
    favicon.ico请求处理
    Node.js学习(Node.js基础)
    实现主机访问虚拟机网页的方法总结
    有向/无向图中搜环
    后缀自动机
    莫队算法
    A* 算法求第k短路径
    次小生成树算法
    AC自动机详解
    Link-Cut-Tree详解
  • 原文地址:https://www.cnblogs.com/wugongzi/p/13265051.html
Copyright © 2011-2022 走看看