當前端使用 JavaScript 進行小數點運算時常常會遇到與預期不符的問題例如以下:
> 5.10 + 100.1 < 105.19999999999999 > 555.1012 - 100.10 < 455.0011999999999 > 5.10 * 9.65 < 49.214999999999996 > 5.10 / 9 < 0.5666666666666667
如上在進行四則運算時會發生結果不如預期,查了一些相關資料後發現主要問題在於,
JavaScript 是用二進制來計算數值,之後再轉換成十進制,因此當有小數點時的四則運算就有可能發生結果異常,
後來在開發中的專案有找到前輩已經在底層寫過相關的解決辦法,只要決定是用那一種四則運算並且丟入兩個變數即可回傳處理後的結果。
// 浮點數相加 function FloatAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); return (FloatMul(arg1, m) + FloatMul(arg2, m)) / m; } // 浮點數相減 function FloatSubtraction(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)); n = (r1 >= r2) ? r1 : r2; return ((arg1 * m - arg2 * m) / m).toFixed(n); } // 浮點數相乘 function FloatMul(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) { } try { m += s2.split(".")[1].length; } catch (e) { } return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); } // 浮點數相除 function FloatDiv(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length } catch (e) { } try { t2 = arg2.toString().split(".")[1].length } catch (e) { } with (Math) { r1 = Number(arg1.toString().replace(".", "")) r2 = Number(arg2.toString().replace(".", "")) return (r1 / r2) * pow(10, t2 - t1); } }
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.
評論