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

JavaScriptの演算子を使って基本的な計算（四則演算）を行う方法

JavaScriptで足し算（+）、引き算（-）、掛け算（*）といった基本的な計算を行うには、算術演算子を使用します。JavaScriptには、加算・減算・乗算・除算・剰余など、基本的な数学処理のための演算子が標準で組み込まれています。

JavaScriptの主な算術演算子

JavaScriptでよく使われる算術演算子は以下のとおりです。

  • +（加算）：数値を足し合わせます。文字列と組み合わせると、文字列の連結として機能します。
  • -（減算）：数値を引き算します。
  • *（乗算）：数値を掛け合わせます。
  • /（除算）：数値を割り算します。
  • %（剰余）：割り算の余りを求めます。
  • ++（インクリメント）：値を1つ増やします。
  • --（デクリメント）：値を1つ減らします。

サンプルコード

次のコードを実行すると、JavaScriptの算術演算子を使った基本的な計算の動きを確認できます。

<html>
<body>
<script>
  var a = 77;
  var b = 30;
  var c = "Demo";
  var linebreak = "<br />";

  // 加算（足し算）
  document.write("a + b = ");
  result = a + b;
  document.write(result);
  document.write(linebreak);

  // 減算（引き算）
  document.write("a - b = ");
  result = a - b;
  document.write(result);
  document.write(linebreak);

  // 除算（割り算）
  document.write("a / b = ");
  result = a / b;
  document.write(result);
  document.write(linebreak);

  // 剰余（余り）
  document.write("a % b = ");
  result = a % b;
  document.write(result);
  document.write(linebreak);

  // 数値と文字列の連結
  document.write("a + b + c = ");
  result = a + b + c;
  document.write(result);
  document.write(linebreak);

  // インクリメント（値を1増やす）
  a = ++a;
  document.write("++a = ");
  result = ++a;
  document.write(result);
  document.write(linebreak);

  // デクリメント（値を1減らす）
  b = --b;
  document.write("--b = ");
  result = --b;
  document.write(result);
  document.write(linebreak);
</script>
</body>
</html>

実行結果

このコードをブラウザで実行すると、以下のように出力されます。

a + b = 107
a - b = 47
a / b = 2.566666666666667
a % b = 17
a + b + c = 107Demo
++a = 79
--b = 28

解説のポイント

  • 数値と文字列の連結：「a + b + c」では、まず数値同士の「77 + 30 = 107」が計算され、その後で文字列「Demo」と連結されて「107Demo」と表示されます。+演算子は、数値同士なら加算、片方でも文字列なら連結として働きます。
  • インクリメントとデクリメント：「++a」は値を1増やし、「--b」は値を1減らします。変数の前（前置）に置くと増減後の値が、後（後置）に置くと増減前の値が返される点に注意しましょう。
  • 剰余演算子：「%」は割り算の余りを返します。77を30で割ると商は2、余りは17なので「17」が出力されます。

なお、document.write()は現在では非推奨（レガシー）とされているため、実際の開発ではconsole.log()を使ってコンソールに結果を出力するのが一般的です。

  1. JavaScriptのdocument.formsプロパティでフォーム数を取得する方法

    document.formsとはJavaScriptのdocument.formsプロパティは、現在のドキュメント内に存在するすべての<form>要素のコレクション（HTMLCollection）を返します。このコレクションのlengthプロパティを参照することで、ドキュメント内にいくつの<form>タグが含まれているかを簡単に取得できます。サンプルコード以下のコードでは、ページ内に2つのフォームを配置し、document.forms.lengthを使ってフォームの総数を取得して表示しています。<!DOCTYPE html> <html> &nb

  2. 【初心者向け】JavaScriptのdocument.titleでページタイトルを取得・変更する方法

    JavaScriptでWebページのタイトル（<title>タグの内容）を操作したい場合は、document.title プロパティを使用します。document.titleとは？document.title は、現在表示しているHTMLドキュメントのタイトルを読み書きできるプロパティです。値を取得する場合： var x = document.title; のように参照することで、現在のタイトル文字列が返されます。値を変更する場合： document.title = 新しいタイトル; のように代入すると、ブラウザのタブやウィンドウに表示されるタイトルを動的に書き換えられます。サンプ