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"
下一篇:
Python 入门之元组与字典(二)