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

JavaScriptの+演算子が数値の合計ではなく文字列を連結する原因と対処法

なぜ「+」演算子は加算ではなく連結を行うのか？

JavaScriptで「+」記号を使ったのに、数値の合計ではなく文字列が連結されてしまうのは、parseInt()を使用していないことが主な原因です。

テキストボックス（input要素）から取得した値は、たとえ数字を入力していても、すべて文字列型（string）として扱われます。そのため、そのまま「+」演算子で足し合わせると、数値の加算ではなく文字列同士の連結が実行されてしまいます。

これを解決するには、テキストボックスから値を取得した後、parseInt()を使って文字列を整数に変換（パース）する必要があります。

コード例

以下は、parseInt()を使って2つの数値の合計を正しく計算するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
FirstNumber:
<input type="num" class="num1" placeholder=""><br>
SecondNumber:<input type="num" class="num2" placeholder=""><br><br>
<input type="button" onclick="sumOfTwoNumbers()" value="Addition">
<p class="output"></p>
<script>
   function sumOfTwoNumbers(){
      var num1 = document.querySelector(".num1").value;
      var num2 = document.querySelector(".num2").value;
      var addition = parseInt(num1)+parseInt(num2);
      document.querySelector(".output").innerHTML = "The addition of two numbers= " + addition;
   }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存します。その後、ファイルを右クリックし、VS Codeエディターで「Open with Live Server」オプションを選択してください。

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

JavaScriptの+演算子が数値の合計ではなく文字列を連結する原因と対処法

次に、2つのテキストボックスにそれぞれ数値を入力し、「Addition」ボタンをクリックすると、正しい合計値が出力されます。

JavaScriptの+演算子が数値の合計ではなく文字列を連結する原因と対処法

補足：その他の数値変換の方法

parseInt()以外にも、Number()関数や単項プラス演算子（+value）を使って文字列を数値に変換できます。小数を扱いたい場合は、parseFloat()を使用してください。状況に応じて適切な変換方法を選ぶことで、意図しない文字列連結を防ぐことができます。

  1. JavaScriptで学ぶ二分探索木（Binary Search Tree）の基本と操作方法

    二分探索木とは二分探索木は、通常の木構造とは異なる特別な性質を持つデータ構造です。この性質により、データの検索・挿入・削除を効率的に行うことができます。二分探索木では、各ノードが次のルールに従わなければなりません。ノードの左の子は、必ず親ノードより小さい値を持つノードの右の子は、必ず親ノードより大きい値を持つこの規則が成り立つことで、値を探す際に「目的の値より小さければ左へ、大きければ右へ」と分岐をたどるだけで済み、探索範囲を毎回半分に絞り込めます。そのため、整列された配列に対する二分探索と同様の効率性が得られます。本記事を含む木構造のセクションでは、主にこの二分探索木を中心に解説を進めていき

  2. JavaScriptの+演算子が数値の合計ではなく文字列を連結する原因と対処法

    なぜ「+」演算子は加算ではなく連結を行うのか？ JavaScriptで「+」記号を使ったのに、数値の合計ではなく文字列が連結されてしまうのは、parseInt()を使用していないことが主な原因です。 テキストボックス（input要素）から取得した値は、たとえ数字を入力していても、すべて文字列型（string）として扱われます。そのため、そのまま「+」演算子で足し合わせると、数値の加算ではなく文字列同士の連結が実行されてしまいます。 これを解決するには、テキストボックスから値を取得した後、parseInt()を使って文字列を整数に変換（パース）する必要があります。 コード例 以下は、parseI