Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptの "+" 演算子の謎

Posted at

今回は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の + 演算子の動作が理解しやすくなると思います。

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address