vue 常用filter过滤器。格式化几位小数，金额过千加逗号，没有数据显示“-”，有数据显示具体数据

一、toFixed（常用格式化保留几位小数）。

先展示一下toFixed过滤器的效果，比如：当我们获取用户信息的时候，展示当前用户的余额时，需要首先调用后端的接口查询余额，然后在显示余额，并保留两位小数。

1.调用后端接口还未响应时。以“-”展示（此时data中绑定的变量必须给空字符串，不能给0），不能以0展示给用户，不然会让用户误以为自己余额只剩下0元。（图片描述的错误标题不用重点关注，我这里随便截图的）

2.后端接口响应后，获取到金额并以格式化两位小数的展示。

3.此时用户金额为零，就展示为零。

 

二、numFormat（格式化美元金额，如果需求是其他符号金额，可以修改代码）。

如果正在请求后端数据时，我还是显示的“-”，这里我就不展示了。如果有数据， 就以美元符号“$”+金额并保留2两位小数；如果金额数值每过一次千位，就添加一个“,”逗号。

三、其他。

其他函数基本上差不多，看代码就知道意思了，我这里就不仔细说明了。

为了方便多个页面和组件使用，最好是注册全局过滤器。全局过滤器教程：

vue 注册全局filter过滤器，方便在多个组件中使用_PrimaryColor-CSDN博客

代码（推荐优化版本）：

// 两个浮点数求和
function accAdd(num1,num2){
    var r1,r2,m;
    try{
        r1 = num1.toString().split('.')[1].length;
    }catch(e){
        r1 = 0;
    }
    try{
        r2=num2.toString().split(".")[1].length;
    }catch(e){
        r2=0;
    }
    m=Math.pow(10,Math.max(r1,r2));
    // return (num1*m+num2*m)/m;
    return Math.round(num1*m+num2*m)/m;
}
// 两个浮点数相减
function accSub(num1,num2){
    var r1,r2,m,n;
    try{
        r1 = num1.toString().split('.')[1].length;
    }catch(e){
        r1 = 0;
    }
    try{
        r2=num2.toString().split(".")[1].length;
    }catch(e){
        r2=0;
    }
    m=Math.pow(10,Math.max(r1,r2));
    n=(r1>=r2)?r1:r2;
    return (Math.round(num1*m-num2*m)/m).toFixed(n);
}
// 两数相乘
function accMul(num1,num2){
    var m=0,s1=num1.toString(),s2=num2.toString();
    try{m+=s1.split(".")[1].length}catch(e){};
    try{m+=s2.split(".")[1].length}catch(e){};
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
// 两数相除
function accDiv(num1,num2){
    var t1,t2,r1,r2;
    try{
        t1 = num1.toString().split('.')[1].length;
    }catch(e){
        t1 = 0;
    }
    try{
        t2=num2.toString().split(".")[1].length;
    }catch(e){
        t2=0;
    }
    r1=Number(num1.toString().replace(".",""));
    r2=Number(num2.toString().replace(".",""));
    return (r1/r2)*Math.pow(10,t2-t1);
}
/**
 * 判断字符是否为空
 * str：字符串
 */
function isNullorEmpty(str) {
    return (str == null || str == "" || str == undefined || str == "undefined") && (str != 0 || str != "0") ? true : false;
}
//格式化
export function toFixed(val,len=0){
    if(isNullorEmpty(val)){
        return '-';
    }else{
        // return val && val != 0 ? (Number(val)).toFixed(len) : '0';
        return val && val != 0 ? (accDiv(Math.floor(accMul(Number(val),Math.pow(10,len))),Math.pow(10,len))).toFixed(len) : '0';
    }
}

//格式化百分比，为零显示零
export function toPercent(val,len){
    if(isNullorEmpty(val)){
        return '-';
    }else{
        return val && val != 0 ? (accDiv(Math.floor(accMul(Number(val),Math.pow(10,len))),Math.pow(10,len))).toFixed(len)+'%' : '0'+'%';
    }
}

//格式化数据，自定义追尾字符串参数
//len：小数位长度,str：追尾字符串
//示例：{{openPositionContract | format(2,' ETH')}}
export function format(val,len=0,str=''){
    if(val===0){
        return 0+str;
    }else{
        return val && val != 0 ?(accDiv(Math.floor(accMul(Number(val),Math.pow(10,len))),Math.pow(10,len))).toFixed(len)+str : '-';
    }
}

//数值过千加逗号，并保留几位小数
//num：数值。计算属性不用传
//len：小数精度位
//symbol：默认格式化的符号。可以为空
export function numFormat(num,len,symbol='$') {
    if(isNullorEmpty(num)){
        return '-';
    }
    var isNegative=num>=0 ? false : true;
    if(isNegative){     //是否负数
        num=Math.abs(Number(num));
    }

    // var c=num && num != 0 ? Number(num).toFixed(len).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') : '0';
    // var c=num && num != 0 ? (Math.floor(Number(num) * Math.pow(10,len)) / Math.pow(10,len)).toFixed(len).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') : '0';
    var c=num && num != 0 ? toThousands((accDiv(Math.floor(accMul(Number(num),Math.pow(10,len))) , Math.pow(10,len))).toFixed(len)) : '0';

    c=symbol+c;
    if(isNegative){     //是否负数
        c='-'+c;
    }
    return c;
}

//过千加逗号
function toThousands(num) {
    var result = '', counter = 0;
    var dot = String(num).indexOf(".");
    if(dot != -1){
         // alert("有小数点");
        // 获取小数点后面的数字(indexOf和substring都不支持数字，所以要先转字符串才可以用)
        var dotCnt = String(num).substring(dot+1,num.length);
 
        // 获取小数点前面的数字
        num = String(num).split('.')[0]
        num = (num || 0).toString();
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result = num.charAt(i) + result;
            if (!(counter % 3) && i != 0) { result = ',' + result; }
        }
        result = result + '.' + dotCnt;
        return result;
        
    }else{
        // alert("没有小数点");
        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    }
}

如果有一些bug，或者优化，欢饮评论哈。

优化版本：

toFixed采用向上取整的方式，很多时候数据最好使用向下取整处理。

/**
 * 判断字符是否为空
 * str：字符串
 */
function isNullorEmpty(str) {
    return (str == null || str == "" || str == undefined || str == "undefined") && (str != 0 || str != "0") ? true : false;
}
//格式化
export function toFixed(val,len=0){
    if(isNullorEmpty(val)){
        return '-';
    }else{
        return val && val != 0 ? (Math.floor(Number(val) * Math.pow(10,len)) / Math.pow(10,len)).toFixed(len) : '0';
    }
}

//格式化百分比，为零显示零
export function toPercent(val,len){
    if(isNullorEmpty(val)){
        return '-';
    }else{
        return val && val != 0 ? (Math.floor(Number(val) * Math.pow(10,len)) / Math.pow(10,len)).toFixed(len)+'%' : '0'+'%';
    }
}

//格式化数据，自定义追尾字符串参数
//len：小数位长度,str：追尾字符串
//示例：{{openPositionContract | format(2,' ETH')}}
export function format(val,len=0,str=''){
    if(val===0){
        return 0+str;
    }else{
        return val && val != 0 ?(Math.floor(Number(val) * Math.pow(10,len)) / Math.pow(10,len)).toFixed(len)+str : '-';
    }
}

//数值过千加逗号，并保留几位小数
export function numFormat(num,len) {
    if(isNullorEmpty(num)){
        return '-';
    }
    var isNegative=num>=0 ? false : true;
    if(isNegative){     //是否负数
        num=Math.abs(Number(num));
    }
    // var c=num && num != 0 ? Number(num).toFixed(len).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') : '0';
    var c=num && num != 0 ? (Math.floor(Number(num) * Math.pow(10,len)) / Math.pow(10,len)).toFixed(len).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') : '0';
    c='$'+c;
    if(isNegative){     //是否负数
        c='-'+c;
    }
    return c;
}