[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 的區別