Javascript Floating-Point Calculation

前陣子在幫同事改一段以前的程式的時候發現Javascript在做Float數值的運算時有bug，會導致簡單的計算出問題，當下去找了一下資料有幾個處理方式整理給大家。

Problem Description

在開始前我們直接看下面的範例就知道問題在哪邊

這邊三個簡單的計算，你可以發現前面兩個都正確，第三個結果就怪了。
小學的99乘法表告訴我們99是81，但這個結果的尾數竟然不是1….就知道見鬼了

為什麼Javascript的浮點數計算會有這樣的差異呢？

因為電腦沒辦法正確的顯示0.1,0.2,0.3這樣的浮點數(因為數值都是0101的組成)，所以透過0101組成浮點數時就產生了誤差。我們看到的0.1其實是已經經過進位後的結果(原先可能是0.1000000000000001這樣的值)，所以當我們做運算後就會產生更大的誤差。

對於浮點數的基本組成與相關問題可以參考這篇文章，解釋得非常詳細。

這邊幫大家在Google大神的協助下找了幾張圖來參考。

首先一個簡單的浮點數可以分為兩部分：

而透過二進位表示法(IEEE 754)來存放時則如下：

實際的運算邏輯flow大致可以參考下圖

Solution without plugin

簡單來講我們可以用Number.prototype.toFixed()這個數值型別的function來幫我們確認要計算到多精準的小數位

開始前我們先參考MDN給我們的說明

Method of Number

Implemented in JavaScript 1.5

ECMAScript Edition ECMAScript 3rd Edition

Syntax

number.toFixed( [digits] )

Parameter

digits The number of digits to appear after the decimal point; this may be a value between 0 and 20, inclusive, and implementations may optionally support a larger range of values. If this argument is omitted, it is treated as 0.

Returns

A string representation of number that does not use exponential notation and has exactly digits digits after the decimal place. The number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length. If number is greater than 1e+21, this method simply calls Number.toString() and returns a string in exponential notation.

Throws

RangeError If digits is too small or too large. Values between 0 and 20, inclusive, will not cause a RangeError. Implementations are allowed to support larger and smaller values as well. TypeError If this method is invoked on an object that is not a Number.

如上面的說明，由於他是ECMAScript的內建語法所以我們不需要特別用什麼套件，只要確任瀏覽器支援就可以了(目前全部瀏覽器都支援)

我們將剛剛的一開始的三個範例改寫如下

JS Bin

如此一來我們就可以正確地顯示浮點數運算過後的值了。

從解法我們發現如果用 number.toFixed( [digits] )) 這樣的解法需要先知道到底結果是小數點第幾位，但實務上我們有很多情況會不知道該數值到底第幾位.所以可能還要把多算出來的0給處理掉，如下：

JS Bin