当前位置:   article > 正文

(05)VUE/JS 保留小数方法合集 (保留两位为例)_vue保留两位小数的函数

vue保留两位小数的函数

分别从四舍五入和是否自动补0这两个方面进行入手。

会四舍五入

1、toFixed()函数
注意:此方法将数值类型的数据改变成了字符串类型

// 四舍五入
var num = 1.6492;
num = num.toFixed(2);
console.log(num);            //1.65
console.log(typeof num);     //string
  • 1
  • 2
  • 3
  • 4
  • 5

不会四舍五入

1.Math.floor()和Math.ceil()函数
注意:此方法不改变数据类型

var number = 1.7332;
var Test1 = Math.floor(number * 100) / 100;//保留两位小数,
var Test2 = Math.ceil(number * 100) / 100;//保留两位小数

console.dir(Test1);        //1.73
console.dir(typeof(Test1)); // number

console.dir(Test2);        //1.74
console.dir(typeof(Test2)); // number

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2、字符串匹配
注意:此方法先将数据转换为字符串,最后再转为数值类型,不会四舍五入,字符串匹配再转换

var num = 1.6492;

// 写法一:
num = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(num);           //1.64
console.log(typeof num);    // number

// 写法二:
let a = 12.12345678
let b = a.toString()
let c = b.substring(0, b.indexOf('.') + 3) * 1
console.log(c) //12.12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

其中【字符串匹配法】好于【Math.floor()】,因为字符串能保证高精度,不受js浮点数长度的约束,同时在动态修改保留位数时更有优势.

3、parseInt()函数
注意:此方法不改变数据类型

var number = 0.99996;
var Test1 = parseInt(number * 100) / 100;//保留两位小数,

console.dir(Test1);        //0.99
console.dir(typeof(Test1)); // number
  • 1
  • 2
  • 3
  • 4
  • 5

但是,当小数位只有一位或者两位都为0的情况下,则只会保留整数。

var number = 0.900006;
var Test1 = parseInt(number * 100) / 100;//保留两位小数,

console.dir(Test1);        //0.9
console.dir(typeof(Test1)); // number
  • 1
  • 2
  • 3
  • 4
  • 5

保留两位小数,若第二位小数为0,则补0(不四舍五入)

方法一:parseInt()和toFixed()

var number = 0.900006;
var Test1 = (parseInt(number * 100) / 100).toFixed(2);//保留两位小数,

console.dir(Test1);        //0.90
console.dir(typeof(Test1)); // number
  • 1
  • 2
  • 3
  • 4
  • 5

方法二:Math.floor()与toFixed()

var number = 0.900006;
var Test1 = (Math.floor(number * 100) / 100).toFixed(2);//保留两位小数,

console.dir(Test1);        //0.90
console.dir(typeof(Test1)); // number
  • 1
  • 2
  • 3
  • 4
  • 5

保留两位小数,若第二位小数为0,则补0(四舍五入)

注意:数据类型变为字符串类型

function keepTwoDecimalFull(num) {  
    var result = parseFloat(num);  
    if (isNaN(result)) {  
        alert('传递参数错误,请检查!');  
        return false;  
    }  
    result = Math.round(num * 100) / 100;  
    var s_x = result.toString(); //将数字转换为字符串
    
    var pos_decimal = s_x.indexOf('.'); //小数点的索引值
    

    // 当整数时,pos_decimal=-1 自动补0  
    if (pos_decimal < 0) {  
        pos_decimal = s_x.length;  
        s_x += '.';  
    }

    // 当数字的长度< 小数点索引+2时,补0  
    while (s_x.length <= pos_decimal + 2) {  
        s_x += '0';  
    }  
    return s_x;  
}  

console.log(keepTwoDecimalFull(1.6042)); //1.60
console.log(typeof keepTwoDecimalFull(1.6042)); //string
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

保留两位小数,若第二位小数为0,则保留一位小数)(不四舍五入)用Math.floor()方法

保留两位小数,若第二位小数为0,则保留一位小数)(四舍五入)

注意:数据类型不变

var num = 1.6042;
function keepTwoDecimal(num) {
  var result = parseFloat(num);
  if (isNaN(result)) {
    alert('传递参数错误,请检查!');
    return false;
  }
  result = Math.round(num * 100) / 100;
  return result;
};

keepTwoDecimal(num);
console.log(keepTwoDecimal(num));            //1.6
console.log(typeof num);     //number
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/617178
推荐阅读
相关标签
  

闽ICP备14008679号