JS：文字列と計算を伴う数値の連結注意点

console.logなどで変数の内容を表示する際、文字列と計算を伴う数値の連結をする際は、注意が必要だ。

例えば、

var a = 100;
var b = 200;
console.log("a + b = " + a + b);

として実行するとコンソール上の表示は、

となってしまう。期待値としては、a + b = 300としたいはず。
その場合は、計算したい部分を()でくくって

var a = 100;
var b = 200;
console.log("a + b = " + (a + b));

とすれば

と期待通りの結果が得られる。
理由は単純で、()をつけた部分が優先順位が1番高いため最初に数値同士の計算がされるためだ。

式の評価順序というものがあって、A + B + Cと記述した場合、左から右に計算が実行される。
A + Bの次は、A + Bの結果にCを足す、という順に実行される。
先ほどの例だとAの部分が文字列なので、最初に

“a + b = ” + a

が実行されてしまい、JavaScriptの特長から変数が文字列型に変更されてしまいうため、計算結果が文字列の

“a + b = 100”

となってしまう。次にbを足してもやはり文字列と数値の足し算として扱われてしまうため、計算がされずに文字列

“a + b = 100200”

が得られるということになる。

優先順位をいう点からすれば、先ほどのa + bの計算を掛け算のa * bに変更してみれば良く分かる。

var a = 100;
var b = 200;
console.log("a + b = " + a * b);

というプログラムであれば、+よりも*の方が優先順位が高いため、括弧がなくてもa * bの計算が最初に実行されて文字列”a + b = “との連結となるため、こちらは期待通りの結果となる。