JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで数値と文字列を加算するとどうなる？連結が起こる仕組みをわかりやすく解説

数値と文字列の加算で起こること

JavaScriptでは、数値と数値を「+」演算子で足すと、通常どおり加算（計算）が行われます。しかし、数値と文字列を足そうとした場合には加算が成立せず、代わりに連結（concatenation）が実行されます。
これは、「+」演算子のオペランドにひとつでも文字列が含まれていると、JavaScriptがその処理を文字列の連結として扱うためです。

サンプルコード

以下の例では、4つの変数 a・b・c・d を用意し、それぞれの計算結果と、typeof 演算子で調べたデータ型を出力して挙動を比較します。

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
  var a = 5 + 5;
  var b = "5" + 5;
  var c = 5 + 5 + "5" + 5;
  var d = "Hello" + 5;

  console.log(a);        // 10
  console.log(b);        // "55"
  console.log(c);        // "1055"
  console.log(d);        // "Hello5"

  console.log(typeof a); // number
  console.log(typeof b); // string
  console.log(typeof c); // string
  console.log(typeof d); // string
</script>
</body>
</html>

実行結果

10
55
1055
Hello5
number
string
string
string

結果のポイント

  • 変数a（5 + 5）：数値同士の加算なので、結果は数値の 10 になります。
  • 変数b（"5" + 5）：片方が文字列のため、加算ではなく連結が起こり、文字列の "55" になります。
  • 変数c（5 + 5 + "5" + 5）：式は左から右へ順に評価されます。まず 5 + 5 = 10（数値）、次に 10 + "5" で文字列 "105" となり、最後に "105" + 5 で文字列 "1055" になります。
  • 変数d（"Hello" + 5）：文字列と数値の連結により、文字列の "Hello5" になります。

このように、式の途中で一度でも文字列が現れると、それ以降の処理はすべて文字列連結に切り替わる点に注意が必要です。

文字列を数値として加算したい場合

文字列の形で保持されている数値を、本当に数値として計算したい場合は、明示的に型変換を行います。

var result1 = Number("5") + 5;      // 10
var result2 = parseInt("5", 10) + 5; // 10

Number() や parseInt() を使えば、文字列を数値に変換してから加算できるため、意図しない連結を防ぐことができます。

まとめ

  • 数値 + 数値 → 加算される（結果は数値）
  • 文字列 + 数値 → 連結される（結果は文字列）
  • 評価は左から右に行われるため、途中で文字列が出た時点で以降はすべて連結になる
  • 数値として計算したい場合は Number() や parseInt() で明示的に変換する
  1. JavaScriptで値を数値に変換するには？Number()メソッドの使い方を解説

    JavaScriptでは、Number()メソッドを使うことで、任意の値を数値に変換できます。このメソッドは、数値を表す文字列を数値へ変換したり、真偽値（boolean）を「1」または「0」に変換したりすることが可能です。ここでは、その基本的な使い方について詳しく解説します。構文var num = Number(value);引数 value に変換したい値を渡すと、数値に変換された結果が返されます。変換できない場合は NaN（Not a Number）が返される点にも注意しましょう。例1：数値文字列と真偽値の変換次の例では、Number()メソッドを使って、数値を表す文字列や真偽値を数値に変

  2. JavaScriptで数値文字列を0と1のビット列にエンコードする方法

    問題 10進数を表す文字列を受け取り、決められたルールに従って「0」と「1」だけで構成される文字列へエンコードするJavaScript関数を実装します。 エンコードのルール 入力文字列の各桁の数字 d に対して、次の手順で符号語を作ります。 d を2進数で表したときのビット数を k とする 「0」を k−1 個並べ、その後ろに「1」を1つ付けた文字列をプレフィックスとする 数字 d 自身を2進数の文字列として表す(最右ビットが最下位ビット) プレフィックスと2進表現を連結したものが d の符号語になる 最後に、すべての桁について得られた符号語を順番に連結したものが、全体のエンコード結果と