JavaScriptの "+" 演算子の謎

今回はJavaScriptの+演算子について私が思っていたよりも中々理解しにくいところがありましたので、記事にしてまとめてみました。

基本的な概念

JavaScriptでは、+ 演算子は2つの役割を持っています：

1. 数値の加算：両方の値が数値の場合、これらを足します。
2. 文字列の連結：一方または両方の値が文字列の場合、値を文字列として結合します。

型変換の例

JavaScriptは、異なる型（数値や文字列）の値が + 演算子で一緒に使われたときに、自動的に型を変換します。この型変換の仕組みが、数値が文字列に変換される理由です。

具体例で説明

例1: 数値と文字列が混ざった場合

var num1 = 1;      // 数値
var num2 = "2";    // 文字列
var num3 = 3;      // 数値
console.log(num1 + num2 + num3); // 出力: "123"

1. 最初の演算（num1 + num2）：

   • num1 は数値 1
   • num2 は文字列 "2"
   • 数値 1 が文字列 "1" に変換されます。
   • "1" + "2" となり、結果は "12" です。

2. 次の演算（"12" + num3）：

   • "12" は文字列
   • num3 は数値 3
   • 数値 3 が文字列 "3" に変換されます。
   • "12" + "3" となり、結果は "123" です。

例2: 文字列と数値が混ざった場合

var num1 = "1";    // 文字列
var num2 = 2;      // 数値
var num3 = 3;      // 数値
console.log(num1 + num2 + num3); // 出力: "123"

1. 最初の演算（num1 + num2）：

   • num1 は文字列 "1"
   • num2 は数値 2
   • 数値 2 が文字列 "2" に変換されます。
   • "1" + "2" となり、結果は "12" です。

2. 次の演算（"12" + num3）：

   • "12" は文字列
   • num3 は数値 3
   • 数値 3 が文字列 "3" に変換されます。
   • "12" + "3" となり、結果は "123" です。

もう一度整理すると

• + 演算子は、数値が文字列と一緒に使われると、数値を文字列に変換します。
• JavaScriptは、どちらか一方が文字列の場合、数値を文字列に変換して連結します。
• これにより、数値と文字列が混ざると、すべてが文字列として扱われ、連結されます。

簡単な例で型変換を確認

console.log(1 + "2");  // 数値 1 が 文字列 "1" に変換され、結果は "12"
console.log("1" + 2);  // 数値 2 が 文字列 "2" に変換され、結果は "12"
console.log(1 + 2);    // 両方とも数値なので、加算されて結果は 3

実生活の例で理解する

• 数値の加算：
  • 1 + 2 = 3 （数を足す）
• 文字列の連結：
  • "1" + "2" = "12" （文字をくっつける）
  • "Hello" + " " + "World" = "Hello World"（文字列をつなげる）

覚えておくポイント

• + 演算子に数値と文字列が混ざると、数値は文字列に変換される。
• 数値を文字列に変換して連結することで、直感的で予測可能な動作が実現される。

このように考えると、JavaScriptの + 演算子の動作が理解しやすくなると思います。