美文网首页前端技术
使用js巧妙处理金额数字

使用js巧妙处理金额数字

作者: Dayon | 来源:发表于2018-07-10 15:33 被阅读10次

    写了好几年程序,只是考虑着如何实现,如何快速完成。最近越发喜欢“优雅”,“巧妙”这样的字眼,所以写程序也慢慢向此靠拢,实在是受益颇多。

    实际编程中,我们肯定时常遇到处理金额数字这样的需求,易读的金额数字将会提升你的用户体验。这里我整理了几种不错的方式,总结一下,方便日后使用。

    一、含小数位控制

    function formatMoney(s, type) {  
        if (/[^0-9\.]/.test(s))  
            return "0";  
        if (s == null || s == "")  
            return "0";  
        s = s.toString().replace(/^(\d*)$/, "$1.");  
        s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");  
        s = s.replace(".", ",");  
        var re = /(\d)(\d{3},)/;  
        while (re.test(s))  
            s = s.replace(re, "$1,$2");  
        s = s.replace(/,(\d\d)$/, ".$1");  
        if (type == 0) {// 不带小数位(默认是有小数位)
            var a = s.split(".");  
            if (a[1] == "00") {  
                s = a[0];  
            }  
        }  
        return s;  
    }  
    formatMoney('13222222',3)
    

    二、字符串正则处理

    function format_number(n){  
       var b=parseInt(n).toString();  
       var len=b.length;  
       if(len<=3){return b;}  
       var r=len%3;  
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");  
     }  
     format_number('4524324234');
    

    三、正则表达式

    var num='12345678';
    var str = num.replace(/\d(?=(?:\d{3})+\b)/g,'$&,');
    console.log(str); //"12,345,678"
    //扩展Number方法
    Number.prototype.toCurrencyString=function(){
      return this.toFixed(2).replace(/\d(?=(?:\d{3})+\b)/g,'$&,'); 
    }
    

    四、toLocaleString

    toLocaleString 牵扯到一些本地化的数字格式的变化,这个需要注意一下。

    var number = 123456.789;
    // 德语使用逗号作为小数分隔符,周期为千位
    alert(number.toLocaleString("de-DE"));
    // → 123.456,789
    // 在大多数阿拉伯语国家的阿拉伯语使用真实的阿拉伯数字
    alert(number.toLocaleString("ar-EG"));
    // → ١٢٣٤٥٦٫٧٨٩
    // 印度使用 千/十万/千万 作为分隔位置
    alert(number.toLocaleString("en-IN"));
    // → 1,23,456.789
    // nu扩展密钥请求编号系统, e.g. 中文十进制
    alert(number.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
    // → 一二三,四五六.七八九
    // 当请求可能不被支持的语言(例如巴厘语)时,
    // 加入后备语言(在这种情况下为印尼语)
    alert(number.toLocaleString(["ban", "id"]));
    // → 123.456,789
    

    兼容问题一览:


    toLocaleString toLocaleString

    排除掉浏览器兼容问题,个人觉得这是最巧妙的实现方式,简单到都不用写代码🙈

    五、总结

    本来打算自己写个方法,后来发现了好多不错的轮子。索性摘录过来,以备后续使用,感谢轮子的主人,阿门!

    参考:

    1. js 金额加逗号
    2. MDN Number
    3. js数字格式化
    4. 数字加逗号

    相关文章

      网友评论

        本文标题:使用js巧妙处理金额数字

        本文链接:https://www.haomeiwen.com/subject/nfzfpftx.html