vue千分位展示与保留两位小数

js数字千分位与保留两位小数展示总结

今天在敲代码的时候，产品提出了数字金额需要展示千分位的需求，而且千分位后面还要保留两位小数，不明所以的我当下就百度了一下展示千分位的方法，发现网上讲的大概是一下两种方法：

• 方法1： 一个浏览器自带的方法，toLocaleString()，我用的google，其他的还没测过，这个方法还不错，可以用，代码如下。

let a = 3000
a.toLocaleString()   //3,000

• 方法2：使用正则表达式，这是网上的方法，我使用之后无效果。代码如下：

function format (num) {
  return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}

而保留两位小数的方法是toFixed(x)，x时传入的参数，规定保留几位小数，代码如下：

let a = 3000
let b = 3000.25565
a.toFixed(2)    // 3000.00
b.toFixed(2)   // 3000.25

这时候出现了问题，toFixed()和toLocaleString()这两个方法都只能使用数字类型的数据调用，而且转换完之后数据就变成了字符串类型，也就是说转换了一个就无法调用第二个，不同同时转换。所以我改变了策略，写了一个过滤器，直接手动拼接。首先将数字类型的val变成千分位，此时val变成了字符串，再判断它是否已经有小数，如果没有就拼接上 “.00”，如果只有一位小数，就再加一个0。最后只需要将过滤器加到需要过滤的值上就行啦。
indexOf(".")方法返回 “.” 在字符串val中的索引，如果没有就返回-1

// 假如 val = 3000
num_filter(val){      
     val =val.toLocaleString()    // 3,000
     if(val.indexOf(".")==-1){
       val=val+".00"     //3,000.00
     }else if(val.charAt(val.indexOf(".")==val.length-2)){
       val=val+"0"
     }
     return val
   }


// 假如 val = 3000.5
num_filter(val){      
     val =val.toLocaleString()    // 3,000.5
     if(val.indexOf(".")==-1){
       val=val+".00"    
     }else if(val.charAt(val.indexOf(".")==val.length-2)){
       val=val+"0"     // //3,000.50
     }
     return val
   }