JavaScript | 単項演算子(マイナス・プラス)

JavaScript JavaScript
スポンサーリンク

では 単項プラス(+)と単項マイナス(- をプログラミング初心者向けに噛み砕いて、動きがわかる例題と解説をたっぷり付けて説明します。実際に手を動かせばすぐ理解できます。

基本イメージ(超カンタン)

  • - を値の前に置く → 符号を反転する(プラスをマイナスに、マイナスをプラスに)
  • + を値の前に置く → 数値に変換しようとする(正の数ならそのまま)
  • つまり -x は「x の符号をひっくり返す」、+x は「x を数値として扱おうとする」ことが多い — ただし + は見た目では変化が無いことが多いです。

仕組みをやさしく説明(ステップで理解)

  • 1) 数がそのまま来たとき
console.log(-5);  // -5 を反転 → -5(もともと負) -> 結果: -5? ←注意(下で例)
console.log(+5);  // そのまま → 5
JavaScript

補足:上の -5 は「リテラルで負の数」を書いているだけなので -5 のまま。通常は変数に対して反転を使います。

  • 2) 変数に対して使うと分かりやすい
let a = 10;
console.log(-a); // → -10   (10 の符号を反転)
let b = -8;
console.log(-b); // → 8    (-8 の符号を反転して +8)
JavaScript
  • 3) 文字列や null, 配列など数値でない値に使うと —— JavaScript は 「数値に変換を試みる」
console.log(+'80');    // → 80       (文字列 "80" を数値 80 に変換)
console.log(-'80');    // → -80      (まず "80" を 80 にしてから符号反転)
console.log(+null);    // → 0        (null を 0 として扱う)
console.log(+true);    // → 1        (true を 1)
console.log(+false);   // → 0        (false を 0)
console.log(+'abc');   // → NaN      ("abc" は数にできない -> Not a Number)
console.log(-['12.34']); // → -12.34  (['12.34'] は中身を数に変換できる)
console.log(+['1','2']); // → NaN     (配列に複数要素だと数にできない)
JavaScript

なぜ + を使うの?(実務での使い分け)

  • + を使うと短く Number(x) と同じように 数値に変換できます(ただし挙動は完全に同じではない細かい差はある)。
    例:let n = +inputValue; とすれば inputValue を数に変換する簡潔な書き方に。
  • でも、可読性の観点では Number(...)parseInt(...) を使ったほうが意図が明確なので初心者にはそちらを推奨します。

よくある間違い・注意点

  1. +'123abc'NaN になる — 途中に文字があると数にできない。
  2. 配列やオブジェクトは「中身の形」によって結果が変わる:+['12']12 だが +['1','2']NaN
  3. - は「負のリテラル」を書くのと「単項マイナスで反転する」の二通りの見え方があるので、let x = 5; -x のように変数で使うとわかりやすい。
  4. 可読性が重要:数値変換が目的なら Number(value)parseFloat(value) を使う方がベター。

具体的な例題(手を動かす用)

以下はコピーしてブラウザのデベロッパーツール(Console)に貼ると動く例です。結果と理由を確認してみてください。

例題1:符号の反転

let x = 7;
console.log(-x);  // 期待: -7
x = -3;
console.log(-x);  // 期待: 3
JavaScript

例題2:文字列を数にする

console.log(+'42' + 8);   // 期待: 50  (+'42' -> 42、その後 +8)
console.log('42' + 8);    // 期待: "428"(文字列連結。ここは注意)
JavaScript

例題3:null/boolean の扱い

console.log(+null);   // 0
console.log(+true);   // 1
console.log(+false);  // 0
JavaScript

例題4:失敗する例(NaN)

console.log(+'abc');     // NaN
console.log(+['1','2']); // NaN
JavaScript

練習問題(自力で考えてみよう)

下の問題をコンソールで実行して、結果を予想→実行して答え合わせしてください。答えと解説は下にあります。

  1. console.log(-'5'); の結果は?
  2. console.log(+ ' 17 '); (空白つきの文字列)の結果は?
  3. console.log(-['-3']); の結果は?
  4. console.log(+{}); の結果は?
  5. let s = '5'; console.log(+s + +s); の結果は?
  6. console.log('10' - '4');console.log('10' + '4'); の違いは?
  7. console.log(+undefined); の結果は?
  8. console.log(-true); の結果は?

練習問題 解答と解説

  1. -'5'-5
    解説:文字列 '5' が数値 5 に変換され、それをマイナスで反転 → -5。
  2. +' 17 '17
    解説:前後の空白は無視される(数値に変換できる)。
  3. -['-3']3 (注意:配列の中の文字列 ‘-3’ が数に変換され -3 になり、それを反転)
  4. +{}NaN
    解説:オブジェクト {} は数に変換できない → NaN。
  5. +s + +s10
    解説:+s5(数値)。5 + 510+s + +s+ は二回あるので、両方数値変換。
  6. '10' - '4'6'10' + '4''104'
    解説:- は数値演算になるので文字列が数に変換される。+ 二項演算子(結合演算子として)だと文字列結合になるので要注意。
  7. +undefinedNaN
    解説:undefined は数に変換できない。
  8. -true-1
    解説:true は数に変換すると 1、それを - で反転 → -1

まとめ(初心者が覚えておくべき3つ)

  1. -x は「符号を反転する」―― 変数で使うと分かりやすい。
  2. +x は「x を数として扱おうとする」―― 数値化のショートカットだが Number(x) のほうが意図が明確。
  3. 文字列や null, boolean, 配列などを渡すと 自動変換 が起きる。便利だが、予期せぬ NaN に注意!
タイトルとURLをコピーしました