详细分析Js中保留前几位小数的基本知识（附Demo）

前言

从实战中学习，由于需要计算充电以及结束充电的时长，并且保留两位小数：

onLoad(page, params = {
     
     }) {
    
    
  // 查询要带页面信息，当前页还有数据
  listViewDeviceChargeHistory(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
    
    
    const data = res.data.data;
    this.page.total = data.total;
    this.chargeHisData = data.records;

    // 计算每条记录的充电时长并保留两位小数
    this.chargeHisData.forEach(item => {
    
    
      if (item.chargeStartTime && item.chargeEndTime) {
    
    
        const start = new Date(item.chargeStartTime);
        const end = new Date(item.chargeEndTime);
        item.chargeDuration = ((end - start) / (1000 * 60)).toFixed(2); // 保留两位小数
      } else {
    
    
        item.chargeDuration = null; // 或者0，视需要而定
      }
    });

  });
}

总体截图如下：

1. 基本知识

保留小数位数的常见方法是使用 JavaScript 中的 toFixed 方法，用于将数字转换为字符串，并保留指定的小数位数

num.toFixed(digits)

基本的属性如下：

• num：需要格式化的数字
• digits：需要保留的小数位数（0 到 20 之间的整数）

基本的示例如下：

const num = 123.4567;
console.log(num.toFixed(2)); // "123.46"
console.log(num.toFixed(0)); // "123"
console.log(num.toFixed(3)); // "123.457"

具体的注意事项有如下：

• 返回类型： toFixed 返回的是字符串
  如果后续需要进行数学运算，需要将其转换回数字类型

const result = parseFloat(num.toFixed(2));

• 舍入：toFixed 采用四舍五入规则
  如果数值的后续位数大于等于 5，则会进位

• 精度问题：JavaScript 中的浮点数表示可能导致精度问题
  例如，0.1 + 0.2 并不等于 0.3，这在使用 toFixed 时也要留意

2. Demo

除了上面这种常用的方式，还有如下的方式：

方法	语法	返回类型	舍入方式	使用场景	优点	缺点
toFixed	num.toFixed(digits)	字符串	四舍五入	财务、用户界面展示	简单直观，易于使用	返回字符串，需转换为数字
Math.round	Math.round(num * 100) / 100	数字	四舍五入	一般数学计算	返回数字，方便后续运算	需要乘法和除法，稍显复杂
Intl.NumberFormat	new Intl.NumberFormat()	字符串	四舍五入	需要国际化支持的场景	支持本地化，格式化灵活	语法较复杂，性能相对较低
自定义函数	formatNumber(num, digits)	数字	四舍五入	需要特殊格式化需求	可根据需求自定义，灵活性高	需要手动实现，可能增加代码复杂性

1. 使用 Math.round

const num = 123.4567;
const rounded = Math.round(num * 100) / 100; // 123.46

2. 使用 Intl.NumberFormat

const num = 123.4567;
const formatter = new Intl.NumberFormat('en-US', {
    
    
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const formatted = formatter.format(num); // "123.46"

3. 自定义函数
   可以自定义一个函数来保留小数位数：

function formatNumber(num, digits) {
    
    
  const factor = Math.pow(10, digits);
  return Math.round(num * factor) / factor;
}

const formatted = formatNumber(123.4567, 2); // 123.46

3. 取整 拓展

额外补充下取整的常用函数用法

方法	语法	功能	返回值
Math.floor()	Math.floor(num)	向下取整	小于或等于给定数字的最大整数
Math.ceil()	Math.ceil(num)	向上取整	大于或等于给定数字的最小整数
Math.round()	Math.round(num)	四舍五入	最接近的整数
parseInt()	parseInt(str)	解析字符串为整数，忽略小数部分	整数
自定义函数	customFloor(num) / customCeil(num)	自定义取整功能	整数

1. Math.floor()
   返回小于或等于给定数字的最大整数

const num = 4.9;
const floored = Math.floor(num); // 结果为 4
console.log(floored); // 输出: 4

2. Math.ceil()
   返回大于或等于给定数字的最小整数

const num = 4.1;
const ceiled = Math.ceil(num); // 结果为 5
console.log(ceiled); // 输出: 5

3. Math.round()
   返回一个数字四舍五入后的最接近整数

const num1 = 4.5;
const rounded1 = Math.round(num1); // 结果为 5
const num2 = 4.4;
const rounded2 = Math.round(num2); // 结果为 4
console.log(rounded1); // 输出: 5
console.log(rounded2); // 输出: 4

4. parseInt()
   将字符串解析为整数。它也可以用于数字，但会忽略小数部分

const strNum = "5.9";
const intNum = parseInt(strNum); // 结果为 5
console.log(intNum); // 输出: 5

const floatNum = 7.8;
const intFromFloat = parseInt(floatNum); // 结果为 7
console.log(intFromFloat); // 输出: 7

5. 自定义取整函数
   定义一个自定义函数来实现不同的取整需求：

function customFloor(num) {
    
    
  return Math.floor(num); // 向下取整
}

function customCeil(num) {
    
    
  return Math.ceil(num); // 向上取整
}

const num = 3.7;
console.log(customFloor(num)); // 输出: 3
console.log(customCeil(num));   // 输出: 4