[TOC]
>[success] # 四舍五入
参考文章:
[JS保留两位、三位小数(带四舍五入)](https://blog.csdn.net/xueshandugu/article/details/45192863)
现在有一个 **前端算分** 的需求,需要 **精确到2位小数** 并且 **四舍五入** ,首先看一下 **js** 提供的 **toFixed**方法
>[success] ## toFixed()
1. **toFixed()** 方法可把 **指定的数值** **四舍五入** 为 **指定小数位数** 的 **数字**。
~~~
let num = 10.556
console.log(num.toFixed(2)) // 10.56
~~~
上面的结果看似是正确的,实际上在值为 **xx.5**的情况就不是我们想要的 **四舍五入** 的效果,如下:
~~~
let num = 10.555
console.log(num.toFixed(2)) // 10.55
~~~
而我们想要的是 **10.56**,这时候就不能用 **toFixed()** 了,这是因为 **toFixed()** 使用的是 [银行家舍入法](https://www.meiwen.com.cn/subject/jrpznxtx.html),所谓 **银行家舍入法** ,其实质是一种 **四舍六入五取偶** (又称 **四舍六入五留双** )法。
>[success] ## 自定义toFixed()方法
下面使用 **Math.round** 方法来封装一个 **四舍五入** 方法。
**Math.round()**: 函数返回一个数字, **四舍五入后** 最接近的 **整数**。
**思路** :因为 **Math.round()** 方法只能返回一个**整数** ,例如传入的值为 **10.555** ,将传入的值【 **乘以100倍**】就是 **1055.5** ,用 **Math.round()** 方法将 **1055.5 四舍五入** 后返回值 **1056**,再将 **1056** 【**除以100倍**】就得到了 **10.56** 即可。
~~~
/**
* multiple:倍数,默认值100,比如10.555 想四舍五入并且保留2位小数,
* 就要乘以100倍后1055.6用 Math.round四舍五入后除以100倍就是四舍五入后的值
*/
let toFixed = (num, multiple = 100) => {
let formattedVal = parseFloat(num);
if (isNaN(formattedVal)){ // 值为NaN
return false
}
formattedVal = Math.round(formattedVal * multiple) / multiple
return formattedVal
}
// 使用方法
console.log(toFixed(10.555)) // 10.56
~~~
这个方法不会 **补0**,例如:
~~~
console.log(toFixed(10.000)) // 10
~~~
而不是 **10.00**, **如何补0** 如下:
~~~
/**
* multiple:倍数,默认值100,比如10.555 想四舍五入并且保留2位小数,
* 就要乘以100倍后1055.6用 Math.round四舍五入后除以100倍就是四舍五入后的值
*/
let toFixed = (num, multiple = 100) => {
let formattedVal = parseFloat(num);
if (isNaN(formattedVal)) { // 值为NaN
return false
}
formattedVal = Math.round(formattedVal * multiple) / multiple
let numToString = formattedVal.toString()
let pos_decimal = numToString.indexOf('.')
if (pos_decimal < 0) {
pos_decimal = numToString.length
numToString += '.'
}
while (numToString.length <= pos_decimal + 2) {
numToString += '0'
}
return numToString
}
// // 使用方法
console.log(toFixed(10)) // 10.00
~~~
>[success] ## 自定义toFixed()高级版
1. **补0版本**
~~~
let newToFixed = (num,d) => { //
return (Math.round(num * Math.pow(10,d)) / Math.pow(10,d)).toFixed(d)
}
console.log(newToFixed(49.999,2)) // 50.00
~~~
2. **不补0版本**
~~~
let newToFixed = (num,d) => { // 不补0版本
return Number((Math.round(num * Math.pow(10,d)) / Math.pow(10,d)).toFixed(d))
}
console.log(newToFixed(49.999,2)) // 50
~~~
>[success] ## 补充
[github上的Number库](https://github.com/nefe/number-precision),里面包含四舍五入的方法。
- vue复选框逻辑
- get请求给后台传数组
- 提交表单时传值参数处理方案
- Element ui上传图片功能
- async和await的使用
- 时间戳转换
- 日期格式转换时间戳
- 时间戳转换日期格式
- 对深拷贝的认知总结
- vue-右键菜单功能
- textarea中换行、回车、空格的识别与处理
- element ui表格合并
- 合并行(上下行)
- 双层for循环
- 数组去重
- 瀑布流
- 前端多条件筛选
- 闭包的理解
- 改变this指向
- vue单选框逻辑
- 对象数组根据某个属性来进行排序
- vscode插件整理
- 对象数组多条件去重
- Blob类型数据转换Json数据类型
- Element ui做批量上传功能
- 前端cookie和后端cookie
- 强制转换https协议
- 给事件传额外参数
- 树形结构数据处理
- 查找所有父级数据
- 根据id筛选单条数据
- 动态引入阿里图标库
- 四舍五入
- 封装一个Promise.allSettled方法
- 判断输入框内是否有emoji表情
- element-ui的popover组件位置偏移
- formData上传文件时,携带【数组对象参数】
- 前端解压压缩包(zip)解压后上传解压的文件
- element ui表格列相同解决办法
- elementUI,table复选框多选,翻页/切换条数时保持选中状态
- cookie 和 token 的区别