前書き

数学演算は、プログラミング言語の最も基本的かつ普遍的な機能の1つです。 JavaScriptでは、ブラウザウィンドウサイズのディメンションの検索、金融取引の最終価格の取得、Webサイトドキュメントの要素間の距離の計算などの一般的なタスクに数値が頻繁に使用されます。

数学の高度な理解は有能な開発者になるための前提条件ではありませんが、JavaScriptで使用できる操作の種類と、実用的なタスクを達成するためのツールとして数学を使用する方法を知ることが重要です。

他のプログラミング言語とは異なり、JavaScriptにはhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#numbers [数値データ型]が1つしかありません。たとえば、整数(正または負の整数)と浮動小数点(小数点付きの数字)の区別はありません。

このチュートリアルでは、算術演算子、代入演算子、およびJavaScript数値データ型で使用される操作の順序について説明します。

算術演算子

*算術演算子*は、数学演算を示し、値を返す記号です。 式「3 + 7 = 10」では、「+」は加算を表す構文です。

JavaScriptには、基本的な数学からおなじみの多くの演算子と、プログラミングに固有のいくつかの追加演算子があります。

JavaScript算術演算子の参照表を次に示します。

Operator Syntax Example Definition

Addition

+

x + y

Sum of x and y

Subtraction

-

x - y

Difference of x and y

Multiplication

*

x * y

Product of x and y

Division

/

x / y

Quotient of x and y

Modulo

%

x % y

Remainder of x / y

Exponentiation

**

x ** y

x to the y power

Increment

x++

x plus one

Decrement

--

x--

x minus one

この記事では、これらの各演算子について詳しく説明します。

加減

  • Addition および subtraction *演算子はJavaScriptで使用でき、数値の合計と差を見つけるために使用できます。 JavaScriptには組み込みの計算機があり、数学的な操作はコンソールで直接実行できます。

例えば、プラス記号( +)を使用して、 `+ 10 `と ` 20 +`を追加するなど、数字を使用して簡単な追加を行うことができます。

10 + 20;
Output30

普通の数字で数学を行うことに加えて、変数に数字を割り当てて同じ計算を実行することもできます。 この場合、数値を「+ x 」と「 y 」に割り当て、合計を「 z +」に入れます。

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);
Output30

同様に、マイナス記号( -)を使用して、数値または数値を表す変数を減算します。

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);
Output10

負の数と浮動小数点数(10進数)で加算と減算を行うこともできます。

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);
Output-7.7

JavaScriptで注意し、気をつけるべき興味深いことの1つは、数字とhttps://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript[string]を追加した結果です。 。 「1 + 1」は「2」に等しくなるはずですが、この方程式は予期しない結果になるでしょう。

let x = 1 + "1";

console.log(x);
typeof x;
Output11
'string'

JavaScriptは2つの数字を追加する代わりに、ステートメント全体を文字列とhttps://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript#string-concatenation[concatenate ]それらを一緒に。 JavaScriptの動的に型指定された性質に注意することが重要です。これは望ましくない結果をもたらす可能性があるためです。

JavaScriptで加算または減算を使用する一般的な理由は、固定ナビゲーションバーのピクセルから高さを引いたIDまでスクロールすることです。

function scrollToId() {
   const navHeight = 60;
   window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

上記の例では、IDをクリックすると、IDの60ピクセル上までスクロールします。

加算と減算は、JavaScriptで使用する最も一般的な数学方程式の2つです。

乗算と除算

  • Multiplication および division *演算子もJavaScriptで使用でき、製品と数値の商を見つけるために使用されます。

アスタリスク( + * +)は、乗算演算子を表すために使用されます。

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);
Output100

乗算は、消費税を適用した後、アイテムの価格を計算するために使用される場合があります。

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);

console.log("Total:", totalPrice);
OutputTotal: 28.67

スラッシュ( + / +)は、除算演算子を表すために使用されます。

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);
Output4

分数は、分単位で時間数を見つけるなど、時間を計算するとき、またはテストで完了した正解のパーセントを計算するときに特に役立ちます。

モジュロ

少し馴染みのない算術演算子の1つに、除算後の商の剰余を計算するモジュロ(モジュラスとも呼ばれる)演算子があります。 モジュロは、パーセント記号( )で表されます。

例として、 `+ 3 `が ` 9 +`に正確に3回入り、残りがないことを知っています。

9 % 3;
Output0

この関数で見られるように、モジュロ演算子を使用して、数値が偶数か奇数かを判断できます。

// Initialize function to test if a number is even
const isEven = x => {
   // If the remainder after dividing by two is 0, return true
   if (x % 2 === 0) {
       return true;
   }
   // If the number is odd, return false
   return false;
}

// Test the number
isEven(12);
Outputtrue

上記の例では、「+ 12+」は「2」に均等に分割されるため、偶数になります。

多くの場合、プログラミングでは、モジュロはフロー制御の条件ステートメントと組み合わせて使用​​されます。

べき乗

指数*はJavaScriptの新しい演算子の1つであり、指数で数値のべき乗を計算できます。 べき乗の構文は、連続する2つのアスタリスク( + * +)です。

10の5乗、つまり10 ^ 5は次のように記述されます。

10 ** 5;
Output100000

「10 ** 5」は、「+ 10+」に「10」を5回掛けたものと同じです。

10 * 10 * 10 * 10 * 10;

これを記述する別の方法は、 `+ Math.pow()+`メソッドを使用することです。

Math.pow(10, 5);
Output100000

べき乗演算子を使用すると、与えられた数値のべき乗を簡単に見つけることができますが、通常どおり、メソッドと演算子を選択するときはコードベースのスタイルと一貫性を保つことが重要です。

インクリメントとデクリメント

  • Increment および decrement *演算子は、変数の数値を1ずつ増減します。 これらは2つのプラス記号( )または2つのマイナス記号( -)で表され、多くの場合https://www.digitalocean.com/community/tutorials/how-toで使用されます-construct-for-loops-in-javascript#for-loop [loops]。

インクリメント演算子とデクリメント演算子は変数でのみ使用できることに注意してください。生の数でそれらを使用しようとすると、エラーが発生します。

7++
OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

インクリメント演算子とデクリメント演算子は、演算子が変数の前後に配置されているかどうかに応じて、プレフィックス操作またはポストフィックス操作として分類できます。

最初に、 `+ x +`を使用して、プレフィックスの増分をテキスト化します。

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);
Output8

`+ x `の値が1つ増えました。 違いを見るために、 ` y +`で接尾辞の増分をテストします。

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);
Output7

postfix操作では、「+ y +」の値は増加しませんでした。 これは、式が評価されるまで値が増加しないためです。 操作を2回実行すると、値が増加します。

let y = 7;

y++;
y++;

console.log(y);
Output8

インクリメントまたはデクリメント演算子は、ループ内で最も頻繁に見られます。 この「+ for 」ループの例では、「 0+」から開始して、反復ごとに値を「1」ずつ増やして、操作を10回実行します。

// Run a loop ten times
for (let i = 0; i < 10; i++) {
 console.log(i);
}
Output0
1
2
3
4
5
6
7
8
9

上記のコードは、増分演算子を使用して達成されるループの反復を示しています。

「+ x +」は「+ x = x + 1+」の省略形、「+ x-」は「 x = x-1+」の省略形と考えることができます。

割り当て演算子

最も一般的に使用される演算子の1つは* assignment *演算子です。これは既に見ており、等号( + = +)で表されています。 `+ = +`を使用して、右側の値を左側の変数に割り当てます。

// Assign 27 to age variable
let age = 27;

JavaScriptには、標準の代入演算子に加えて、* compound assignment operator *があり、算術演算子と `+ = +`を組み合わせます。

たとえば、加算演算子は元の値から始まり、新しい値を追加します。

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);
Output30

この場合、「+ age + = 3+」は「+ age = age + 3+」と書くのと同じです。

すべての算術演算子を割り当てと組み合わせて、複合割り当て演算子を作成できます。 以下は、JavaScriptの代入演算子の参照表です。

Operator Syntax

Assignment

=

Addition assignment

+=

Subtraction assignment

-=

Multiplication assignment

*=

Division assignment

/=

Remainder assignment

%=

Exponentiation assignment

**=

複合代入演算子は、増分および減分に似たループでよく使用され、方程式を繰り返したり自動化したりする必要がある場合に使用されます。

演算子の優先順位

左から右に読みますが、演算子は通常の数学と同様に優先順位に従って評価されます。

次の例では、方程式の結果を決定する加算よりも乗算の優先順位が高くなっています。

// First multiply 3 by 5, then add 10
10 + 3 * 5;
Output25

代わりに、最初に加算演算を実行したい場合は、括弧でグループ化する必要があります。括弧は常に最高の優先順位を持ちます。

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
Output65

以下は、JavaScriptの算術演算子の演算子の優先順位の最高から最低への参照表です。 インクリメントとデクリメントの場合、postfixはprefixよりも優先順位が高くなります。

増分/減分、乗算/除算、加算/減算の優先順位は同じです。

Operator Syntax

Parentheses

()

Incrementation

Decrementation

--

Exponentiation

**

Multiplication

*

Division

/

Addition

+

Subtraction

-

演算子の優先順位には、算術演算子だけでなく、代入演算子、論理演算子、条件演算子なども含まれます。 完全なリストについては、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence [Mozilla Developer Network(MDN)での演算子の優先順位]を参照してください。

結論

この記事では、多くの使い慣れた数学演算子とプログラミングに固有のいくつかを含む算術演算子と構文について説明しました。

さらに、算術と代入を組み合わせて複合代入演算子を作成する方法と、JavaScriptでの操作の順序を学びました。