初めに
JavaScriptで数を扱うとき注意した方がよいなと思うポイントを書いていきたいと思います。
具体的には「小数点の取り扱い注意」「暗黙の型変換で取り扱い注意」の2つとなります。
小数点の取り扱い注意
JavaScriptの数値型は「IEEE 754 倍精度浮動小数点数」で64ビットの範囲内でどのように小数点を表現するか？ということを定めた規格です。我々は当たり前のように小数点を考えられますが、コンピュータは0か1かの情報しか持っておらずしかも限られた64ビットという範囲では正確に小数点を表すことができません。仮に0.1と数値に与えた場合でも実際には0.1000000000000000055511151231257827021181583404541015625として認識してしまいます。
そのため、小数点の計算をJavaScriptで行うと実際の値と異なる結果になることがあります。確認のために以下のようなコードを書いてみます。
<html>
<head></head>
<body>
<div id = "print"></div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
function print_html(){
var test1 = 0.1
var test2 = 0.2
var test3 = 0.3
var test = test1 + test2 + test3
document.getElementById("print").innerHTML = "<p>" + test +"</p>"
}
print_html()
答えはなんと0.6ではなく0.6000000000000001となります。
そのため、JavaScriptで計算を行うときは極力小数点を使わないようにする必要があります。
暗黙の型変換で取り扱い注意
JavaScriptでは暗黙の型変換が行われ特に数が関わる時には予想に反する型変換が行われる場合があります。
想定外の型変換が行われる例を紹介します。
1 + true は 2となる
先ほどのtest.jsを少し書き換えます。
function print_html(){
var test1 = 1
var test2 = true
var test = test1 + test2
document.getElementById("print").innerHTML = "<p>" + test +"</p>"
}
print_html()
この時の出力結果は2となり数値とbooleanが普通に計算できる状態となります。
1 + "1" は11となる
先ほどのtest.jsをまたもや少し書き換えます。
function print_html(){
var test1 = 1
var test2 = "1"
var test = test1 + test2
document.getElementById("print").innerHTML = "<p>" + test +"</p>"
}
print_html()
この時の出力は11となり2にはなりません。
直感的に思った結果と実際の結果が違うのではまることもあるかなと思いました。
おわりに
ある程度経験を積んでいるエンジニアであれば当たり前と思うような内容ではあるかもしれませんが、初心者にしてみればなんでこうなるんだとはまるケースもあるのかなと思いました。
この手のバグは知っているか知らないかで気づくことができるかが変わってくると思いますので、紹介することでこれらの仕組みが起因するバグをより多くの人が防止できればうれしいなと思います。