vue中给数字新增四舍五入属性
背景:js的数字属性toFixed不是我们正常理解的四舍五入,但是希望能和toFixed一样方便使用,达到四舍五入效果。可以在Number上新增一个属性。
文章目录
- 一、编写四舍五入方法
- 1、新增js文件
- 2、在新增js文件中写方法
- 二、在vue项目中给数字新增rewriteToFixed属性
- 1.在main.js中引入rewriteToFixed
- 2.使用
- 三、其他方式解决该问题
- 1、使用toLocaleString
- 2、使用 Intl.NumberFormat
一、编写四舍五入方法
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"