一、toFixed方法

1、JS中toFixed方法可以将数字保留指定的小数位数,它会四舍五入,并返回一个字符串。

let num1 = 3.145;
let num2 = 3.141;
console.log(num1.toFixed(2));  // 3.15
console.log(num2.toFixed(2));  // 3.14

2、但是需要注意的是,在数字超出10的15次方时,使用toFixed将会返回科学计数法的形式。

console.log((1234567891234567.89).toFixed(2));  // 1234567891234567.75
console.log((123456789123456789.12).toFixed(2));  // 1.23e+17
console.log((123456789123456789.12).toLocaleString());  // 123,456,789,123,456,800.00

3、当字符串和数字相加时,JS会将字符串转换为数字,如果使用toFixed方法,那么返回的是字符串类型。因此在进行计算时需要进行类型转换。

console.log(10 + 3.14.toFixed(2));  // 13.14
console.log(10 + Number((3.14).toFixed(2)));  // 13.14

二、自定义函数实现

1、使用自定义函数可以更灵活的控制保留的小数位数,实现方式主要有两种:正则表达式和数学方法。

2、使用正则表达式实现:

function toFixedByRegExp(num, len) {
  len = len || 0;
  let reg = new RegExp(`^\d+(?:\.\d{0,${len}})?`);
  let stringNum = String(num);
  let matches = stringNum.match(reg);
  if (matches) {
    let result = matches[0];
    let matchLen = result.length;
    if (matchLen < stringNum.length) {
      let suffix = '0'.repeat(len + 1);
      result += suffix.slice(1, len + 2);
    }
    return Number.parseFloat(result);
  } else {
    return NaN;
  }
}

console.log(toFixedByRegExp(3.14159, 2));  // 3.14
console.log(toFixedByRegExp(3.14159, 5));  // 3.14159
console.log(toFixedByRegExp(123456789.123456789, 5));  // 123456789.12346

3、使用数学方法实现:

function toFixedByMath(num, len) {
  len = len || 0;
  let multip = Math.pow(10, len);
  let rounded = Math.round(num * multip);
  let result = rounded / multip;
  let stringNum = result.toString();
  let integerDigits = stringNum.split('.')[0];
  let decimalDigits = stringNum.split('.')[1];
  if (decimalDigits === undefined) {
    decimalDigits = '';
  }
  decimalDigits = decimalDigits.padEnd(len, '0');
  return `${integerDigits}.${decimalDigits}`;
}

console.log(toFixedByMath(3.14159, 2));  // 3.14
console.log(toFixedByMath(3.14159, 5));  // 3.14159
console.log(toFixedByMath(123456789.123456789, 5));  // 123456789.12346

三、格式化输出

1、JS中可以使用toLocaleString方法,将数字按照本地化输出(不同地区对数字的表示有所差异),同时对于小数位数过多或过少的数字,也可以使用该方法将其格式化输出。

let num = 1234567.89;
console.log(num.toLocaleString());  // 1,234,567.89
console.log(num.toLocaleString('en-US', { maximumFractionDigits: 2 }));  // 1,234,567.89
console.log(num.toLocaleString('zh-CN', { maximumFractionDigits: 2 }));  // 1,234,567.89
console.log(num.toLocaleString('zh-CN', { maximumFractionDigits: 5 }));  // 1,234,567.89000
console.log(num.toLocaleString('en-IN', { maximumFractionDigits: 5 }));  // 12,34,567.89000

2、对于需要将格式化的数字作为字符串进行输出的情况,使用toLocaleString可能会导致一些意外的问题,此时可以使用replace方法对逗号和小数点进行替换。

let num = 1234567.89;
console.log(num.toLocaleString().replace(/,/g, '_'));  // 1_234_567.89
console.log(num.toLocaleString().replace(/./g, '-'));  // 1,234,567-89

四、总结

本文介绍了JS中保留两位有效数字的几种常见方式,包括toFixed方法、自定义函数以及格式化输出方法,并且对每种方法进行了详细的阐述和代码示例。在实际开发过程中,根据具体情况选择合适的方式进行保留小数位数的处理,可以使代码更加灵活和高效。