vue中给数字新增四舍五入属性

背景：js的数字属性toFixed不是我们正常理解的四舍五入，但是希望能和toFixed一样方便使用，达到四舍五入效果。可以在Number上新增一个属性。

一、编写四舍五入方法

1、新增js文件

在vue项目中存放js文件的文件夹中新增一个js文件，例如utils文件夹下边新增一个index.js文件。

2、在新增js文件中写方法

// 重写toFixed，为了不替代原生属性toFixed，重新命名rewriteToFixed
// 参数d表示要保留多少位小数
export function rewriteToFixed(d) {
  var s = this + "";
  if (!d) d = 0;
  if (s.indexOf(".") == -1) s += ".";
  s += new Array(d + 1).join("0");
  let test = new RegExp(
    "^(-|\\+)?(\\d+(\\.\\d{0," + (d + 1) + "})?)\\d*$"
  ).exec(s);
  if (test) {
    var s = "0" + test[2],
      pm = test[1] ? test[1] : "",
      a = test[3].length,
      b = true;
    if (a == d + 2) {
      a = s.match(/\d/g);
      if (parseInt(a[a.length - 1]) > 4) {
        for (var i = a.length - 2; i >= 0; i--) {
          a[i] = parseInt(a[i]) + 1;
          if (a[i] == 10) {
            a[i] = 0;
            b = i != 1;
          } else break;
        }
      }
      s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
    }
    if (b) s = s.substring(1);
    return (pm + s).replace(/\.$/, "");
  }
  return this + "";
}

二、在vue项目中给数字新增rewriteToFixed属性

1.在main.js中引入rewriteToFixed

// 引入步骤1中你写好的函数rewriteToFixed 
import { rewriteToFixed } from "./utils/index";
// 给Number新增rewriteToFixed属性
Number.prototype.rewriteToFixed = rewriteToFixed;

2.使用

// 此时你可以在vue项目文件中直接使用rewriteToFixed属性
console.log(100.635.rewriteToFixed(2));
console.log(1.45.rewriteToFixed(1));
console.log(-1.45.rewriteToFixed(1)); // -1.5
// 你可以对比toFixed
console.log(1.45.toFixed(1)); // 1.4

三、其他方式解决该问题

1、使用toLocaleString

const format = (num, decimals=2) => num.toLocaleString('en-US', {
   minimumFractionDigits: decimals,      
   maximumFractionDigits: decimals,
});
console.log(format(1.345));

2、使用 Intl.NumberFormat

const formatter = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 2,      
   maximumFractionDigits: 2,
});
console.log(formatter.format(1.345)); // "2.01"