js 四舍五入保留两位小数|极客笔记

js 四舍五入保留两位小数

在开发前端页面时，我们常常会遇到需要对数字进行四舍五入并保留指定位数小数的情况。JavaScript提供了多种方法来实现这一目的，本文将详细介绍如何在JavaScript中进行四舍五入并保留两位小数。

方法一：使用toFixed方法

JavaScript中的Number对象原生提供了一个toFixed()方法，可以将一个数字转换成字符串，四舍五入保留指定位数的小数。toFixed()的语法为：

let num = 3.1415926;
let roundedNum = num.toFixed(2);
console.log(roundedNum); // 输出"3.14"

在上面的示例中，我们使用toFixed()方法将数字3.1415926四舍五入保留两位小数，最终结果为”3.14″。

需要注意的是，toFixed()方法返回的是一个字符串，而不是数字。如果需要继续进行数值计算，可以使用parseFloat()方法将字符串转换成数字。

let num = 3.1415926;
let roundedNum = num.toFixed(2);
let finalNum = parseFloat(roundedNum);
console.log(finalNum + 0.01); // 输出3.15

方法二：使用Math.round方法

除了toFixed()方法外，JavaScript的Math对象中还提供了一个round()方法，可以对数字进行四舍五入。结合乘除的方法可以实现保留指定位数小数的效果。

let num = 3.1415926;
let roundedNum = Math.round(num * 100) / 100;
console.log(roundedNum); // 输出3.14

在上面的示例中，我们先将数字乘以100，然后使用Math.round()方法进行四舍五入，最后再除以100得到保留两位小数的结果。

方法三：使用Number.prototype.toFixed方法

除了Number对象的toFixed()方法外，还可以通过原型链的方式直接对数字进行四舍五入并保留指定位数的小数。

Number.prototype.roundTo = function(num) {
  let rounded = +(Math.round(this + "e+" + num)  + "e-" + num);
  return rounded;
};

let num = 3.1415926;
let roundedNum = num.roundTo(2);
console.log(roundedNum); // 输出3.14

在上面的示例中，我们扩展了Number对象的原型链，添加了一个roundTo方法，可以接受一个参数用于指定保留的小数位数。

方法四：使用ES6的toFixed方法

在ES6中，引入了一个新特性，可以直接通过模板字符串的方式对数字进行四舍五入并保留指定位数的小数。

let num = 3.1415926;
let roundedNum = +(num.toFixed(2));
console.log(roundedNum); // 输出3.14

在上面的示例中，我们使用了ES6的模板字符串，将数字保留两位小数。

总结

四舍五入并保留指定位数小数在前端开发中是一个常见的需求，通过本文介绍的四种方法，我们可以灵活地根据具体情况选择合适的方式来处理数字。无论是使用原生的toFixed()方法、Math.round()方法，还是自定义的方法，都可以轻松地实现对数字的四舍五入操作。

js 四舍五入保留两位小数