js保留兩位小數最簡單的實現方法
目錄
- 前言
- 1. toFixed() 方法
- 2. Math.floor() 方法
- 3. 字符串+正則匹配
- 4. 強制保留2位小數(例如3.00)
- 5. 四舍五入保留2位小數(若第二位小數為0,則保留一位小數)
- 6. substring()方法 + indexOf()方法
- 拓展
- 總結
前言
日常開發中,后臺會返給我們各式各樣的數據,如果后臺給你返回如下數據時,是不是就已經壓制不住心中的怒火了,別急,其實前端處理這些數據還是非常簡單的,下面用最簡單的方法教你如何1分鐘處理好這些數據。
返回數據示例:
3.1415926535897
85.452655625313
99.128532659596
話不多說,下面直接進入實戰
1. toFixed() 方法
toFixed()
方法用于把數字轉換為字符串,結果的小數點后有指定位數的數字。
實例
let numBer = 3.1415926;numBer = numBer.toFixed(2);console.log(numBer); // 3.14
注意:
該方法會將數值四舍五入,例如 3.148
經過 toFixed(2)
方法得到的結果將是 3.15
且 toFixed()
方法會改變數據類型為字符串。
2. Math.floor() 方法
Math.floor()
方法返回小于或等于一個給定數字的最大整數,可以理解 Math.floor()
為向下取整;其相對的是 Math.ceil()
,此方法是向上取整。
實例
let numBer = 3.1415926;numBer = Math.floor(numBer * 100) / 100;console.log(numBer); // 3.14
注意:
該方法不會修改原有數據類型。
3. 字符串+正則匹配
實例
let numBer = 3.1415926;numBer = Number(numBer.toString().match(/^\d+(?:\.\d{0,2})?/));console.log(numBer);// 3.14
4. 強制保留2位小數(例如3.00)
實例
let numBer = 3;numBer = this.numWay(numBer);// 調用numWay方法console.log(numBer); // 3.00
methods
方法代碼
methods: { numWay(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x * 100) / 100; var s = f.toString(); var rs = s.indexOf("."); if (rs < 0) { rs = s.length; s += "."; } while (s.length <= rs + 2) { s += "0"; } return s; },},
5. 四舍五入保留2位小數(若第二位小數為0,則保留一位小數)
實例
let numBer = 3.1001;numBer = this.numDelivery(numBer);// 調用numDelivery方法console.log(numBer); // 3.1
methods
方法代碼
methods: { numDelivery(num) { var result = parseFloat(num); if (isNaN(result)) { alert("傳遞參數錯誤,請檢查!"); return false; } result = Math.round(num * 100) / 100; return result; },},
6. substring()方法 + indexOf()方法
substring()
方法用于提取字符串中介于兩個指定下標之間的字符。返回的子串包括 開始 處的字符,但不包括 結束 處的字符
indexOf()
方法可返回某個指定的字符串值在字符串中首次出現的位置,如果沒有找到匹配的字符串則返回 -1
。
實例
let numBer = 3.1415926 + "";var str = numBer.substring(0, numBer.indexOf(".") + 3);console.log(str);// 3.14
拓展
為了方便,我們可以寫一個專門的方法,需要的時候調用即可。如下代碼:
<template> <div> {{this.getValue(719.0721)}} </div></template><script>export default { methods: { getValue(val) { return val.toFixed(2); }, },};</script>
頁面展示
總結
到此這篇關于js保留兩位小數最簡單的實現方法的文章就介紹到這了,更多相關js保留兩位小數內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!
