javascriptで文字列結合と数値の足し算がうまくいきません！

Question

javascriptで文字列結合と数値の足し算がうまくいきません！
具体的には、
$(function(){ var i = 100; var j = 200; $('#main').text( i + j + '点'です); });

とするとちゃんと「300点です」と表示されるのですが、

$(function(){ var i = 100; var j = 200; $('#main').text('あなたの得点は' + i + j + '点です'); });
とすると急に「あなたの得点は100200点です」という結果になってしまいます。

どうしたらいいのでしょうか？

Answer 1

これはjavascriptの+演算子の仕様を理解する必要が有ります。
ご存知かと思いますが、javascriptの+演算子は
文字列の連結と数値の足し算という２つの機能が有ります。

では、今回の場合のように文字列と数値がごちゃ混ぜになった場合どういった結果になるのかというと、

数値 + 数値 ＝ 数値 '文字列' + 数値 ＝ '文字列' 数値 + '文字列' ＝ '文字列' となります。

また＋演算子は順次式の左側から実行されますから、
前者のように
i + j + '点です' という形式ならば i(数値) + j(数値) = 300(数値) 300(数値) + '点です'(文字列) = '300点です' (文字列)
になりますが、

後者のように
'あなたの得点は' + i + j + '点です' という形式だと 'あなたの得点は'(文字列) + i (数値) = 'あなたの得点は100' (文字列) 'あなたの得点は100' (文字列) + j(数値) = 'あなたの得点は100200' (文字列) 'あなたの得点は100200' (文字列) + '点です'(文字列) ＝ 'あなたの得点は100200点です' (文字列)
となってしまうというわけです。

ですから、質問者さんが思ったように動作させるためには
$('#main').text('あなたの得点は' + ( i + j) + '点です'); というように数値どうしの足し算を（）で括ることで （）内の処理が優先され、思った通りの処理になりますよ。