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

【JavaScript入門】文字列と数値を連結せずに足し算する方法

JavaScriptでは、文字列と数値を「+」演算子で組み合わせると、加算ではなく連結（文字列の結合）が実行されます。これは、片方のオペランドが文字列である場合、もう片方も自動的に文字列へ変換されるためです。意図した計算結果を得るためには、文字列をあらかじめ数値へ変換しておく必要があります。

本記事では、単項プラス演算子「+」やparseInt()を使って、文字列と数値を正しく加算する方法を具体例とともに解説します。

例1：そのまま加算すると連結される

次の例では、変換を行わずに文字列を数値と直接足しています。この場合、加算ではなく連結が行われ、「1005」という結果が出力されます。

<html>
<body>
<script>
   const string = "100";
   const number = 5;
   document.write(string + number);
</script>
</body>
</html>

出力結果

1005

例2：単項プラス演算子「+」で数値に変換する

次の例では、単項プラス演算子「+」を使って文字列を数値へ変換しています。これにより連結ではなく加算が行われ、正しい計算結果が表示されます。

<html>
<body>
<script>
   const string = "100";
   const number = 5;
   document.write(+string + number);
</script>
</body>
</html>

出力結果

105

例3：parseInt()で数値に変換する

次の例では、parseInt()関数を使って文字列を整数へ変換しています。単項プラス演算子と同様の動作をしますが、小数が含まれる場合は小数点以下が切り捨てられる点に注意してください。

<html>
<body>
<script>
   const string = "100";
   const number = 5;
   document.write(parseInt(string) + number);
</script>
</body>
</html>

出力結果

105

補足：主な数値変換方法の比較

文字列を数値へ変換する主な方法とその特徴は以下のとおりです。用途に応じて使い分けましょう。

方法特徴
+string（単項プラス）記述がシンプル。整数・小数のどちらにも対応
parseInt(string)整数への変換専用。小数点以下は切り捨てられる
parseFloat(string)小数を含む文字列の変換に対応
Number(string)整数・小数の両方に対応。変換できない場合はNaNを返す

まとめ

JavaScriptで文字列と数値を連結せずに足し算したい場合は、単項プラス演算子「+」やparseInt()、Number()などを使って、事前に文字列を数値へ変換することが重要です。整数のみを扱うならparseInt()、小数も扱うならNumber()やparseFloat()を選ぶなど、目的に合った変換方法を活用しましょう。

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

    数値と文字列の加算で起こることJavaScriptでは、数値と数値を「+」演算子で足すと、通常どおり加算（計算）が行われます。しかし、数値と文字列を足そうとした場合には加算が成立せず、代わりに連結（concatenation）が実行されます。これは、「+」演算子のオペランドにひとつでも文字列が含まれていると、JavaScriptがその処理を文字列の連結として扱うためです。サンプルコード以下の例では、4つの変数 a・b・c・d を用意し、それぞれの計算結果と、typeof 演算子で調べたデータ型を出力して挙動を比較します。<!DOCTYPE html><html><

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

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