JS 演算子のまとめ




 
 
演算子は、特定の操作を実行するように JavaScript エンジンに指示するために使用される記号です. たとえば、プラス記号 (+) は加算操作を実行することを意味し、マイナス記号 (-) は減算操作を実行することを意味します. このセクションでは、さまざまな演算子を紹介しますJavaScript の演算子。

 

算術演算子

算術演算子は、加算、減算、乗算、除算などの一般的な数学演算を実行するために使用されます。次の表に、JavaScript でサポートされている算術演算子を示します。

オペレーター 説明
+ 加算演算子 x + y は、x と y の合計を計算することを意味します。
減算演算子 x – y は、x から y を差し引いた差を計算することを意味します。
* 乗算演算子 x * y は、x に y を掛けた積を計算することを意味します。
/ 除算演算子 x / y は、x を y で割った商を計算することを意味します。
% モジュロ (剰余) 演算子 x % y は、x を y で割った余りを計算することを意味します。

算術演算子の詳細については、 JS 算術演算の詳細な説明を参照してください。

サンプルコードは次のとおりです。



var num1 = 10,
    num2 = 4;
console.log("num1 + num2 =", num1 + num2);  // 出力:num1 + num2 = 14
console.log("num1 - num2 =", num1 - num2);  // 出力:num1 - num2 = 6
console.log("num1 * num2 =", num1 * num2);  // 出力:num1 * num2 = 40
console.log("num1 / num2 =", num1 / num2);  // 出力:num1 / num2 = 2.5
console.log("num1 % num2 =", num1 % num2);  // 出力:num1 % num2 = 2 

上記のコードでは、二重引用符内の内容は文字列であるため、その中の演算子はそのまま出力され、操作には関与しません。

代入演算子

代入演算子は、変数に値を代入するために使用されます. 次の表は、JavaScript でサポートされている代入演算子の一覧です:

オペレーター 説明
= 最も単純な代入演算子。演算子の右側の値を演算子の左側の変数に代入します。 x = 10 は、変数 x に値 10 を割り当てることを意味します。
+= 最初に加算を行い、次に結果を演算子の左側の変数に代入します x += y は x = x + y と同等です
-= 最初に減算を実行してから、結果を演算子の左側の変数に割り当てます x -= y は x = x – y と同等です
*= 最初に乗算を実行してから、結果を演算子の左側の変数に代入します x *= y は x = x * y と同等です
/= 最初に除算を実行してから、結果を演算子の左側の変数に代入します x /= y は x = x / y と同等です
%= 最初にモジュロ演算を実行し、次に結果を演算子の左側の変数に代入します x %= y は x = x % y と同等です

代入演算子の詳細については、 JS 代入演算子の説明を参照してください。

サンプルコードは次のとおりです。



var num1 = 10;
num1 += 20;
console.log(num1);  // 出力:30


var num2 = 12,
    num3 = 7;
num2 -= num3;
console.log(num2);  // 出力:5


num1 = 5;
num1 *= 25;
console.log(num1);  // 出力:125


num1 = 50;
num1 /= 10;
console.log(num1);  // 出力:5


num1 = 100;
num1 %= 15;
console.log(num1);  // 出力:10 

文字列演算子

算術演算に加えて、JavaScript の+演算子と+=演算子を使用して文字列を連結することもできます。

  • +演算子の左側と右側の文字列が結合されることを意味します。
  • +=演算子は、最初に文字列を連結し、その結果を演算子の左側の変数に代入することを意味します。

サンプルコードは次のとおりです。


// 変更後のコード
const hello = "Hello ";
const world = "World!";
const helloWorld = hello + world;
console.log(helloWorld); // 出力: Hello World!
hello += world;
console.log(hello); // 出力: Hello World! 

インクリメントおよびデクリメント演算子

The self-increment and self-decrement operator are used to perform self-increment (+1) and self-decrement (-1) operations on the value of a variable. 次の表は、サポートされている自己インクリメント演算子と自己減分演算子を示しています。 JavaScript で:

オペレーター 名前 影響
++x 自動インクリメント演算子 x を 1 インクリメントし、x の値を返します
x++ 自動インクリメント演算子 x の値を返し、x を 1 ずつ増やします
–x デクリメント演算子 x から 1 を減算し、x の値を返します
x– デクリメント演算子 x の値を返し、x を 1 減らします

サンプルコードは次のとおりです。


var num;

num = 10;
console.log(++num);  // 出力:11
console.log(num);    // 出力:11

num = 10;
console.log(num++);  // 出力:10
console.log(num);    // 出力:11

num = 10;
console.log(--num);  // 出力:9
console.log(num);    // 出力:9

num = 10;
console.log(num--);  // 出力:10
console.log(num);    // 出力:9 

比較演算子

比較演算子は、演算子の左右の式を比較するために使用されます. 比較演算子の演算結果はブール値であり、真または偽の2つの結果しかありません. JavaScript でサポートされている比較演算子を次の表に示します。

オペレーター 名前
== 同等 x == y は、x が y と等しい場合に true を意味します
=== 合同 x === y は、x が y と等しく、x と y も同じ型である場合に true を意味します
!= 等しくない x != y は、x が y と等しくない場合に true を意味します
!== 等しくない x !== y は、x が y と等しくない場合、または x と y の型が異なる場合に true を意味します
< 未満 x < y は、x が y より小さい場合に true を意味します
> 以上 x > y は、x が y より大きい場合に true を意味します
>= 以上 x >= y は、x が y 以上の場合に true を意味します
<= 以下 x <= y は、x が y 以下の場合に true を意味します

比較演算子の詳細については、次を参照してください。

  • JS サイズ比較 (>、<、>=、<=) 演算子
  • JS が等号か不等号かを判断する (==, ===, !=, !==) 演算子

サンプルコードは次のとおりです。


const X_VALUE = 25;
const Y_VALUE = 35;
const Z_VALUE = "25";

console.log(X_VALUE == Z_VALUE);  // 出力: true
console.log(X_VALUE === Z_VALUE); // 出力: false
console.log(X_VALUE != Y_VALUE);  // 出力: true
console.log(X_VALUE !== Z_VALUE); // 出力: true
console.log(X_VALUE < Y_VALUE);   // 出力: true
console.log(X_VALUE > Y_VALUE);   // 出力: false
console.log(X_VALUE <= Y_VALUE);  // 出力: true
console.log(X_VALUE >= Y_VALUE);  // 出力: false 

論理演算子

論理演算子は通常、複数の式を結合するために使用されます。論理演算子の結果はブール値であり、true または false の 2 つの結果のみを持つことができます。次の表に、JavaScript でサポートされている論理演算子を示します。

オペレーター 名前
&& ロジックと x && y は、x と y の両方が true の場合に true を意味します
|| 論理的または x || y は、x または y のいずれかが true の場合に true を意味します
! 論理否定 !x は、x が true でない場合に true を意味します

論理演算子の詳細については、次を参照してください。

  • JS && (および操作) の詳細な説明
  • JS || (または操作) 詳細説明
  • JS ! (操作ではない) 詳しい説明

サンプルコードは次のとおりです。


// 年の定義
var currentYear = 2021;

// うるう年は、400で割り切れるか、4で割り切れて100で割り切れない
if((currentYear % 400 == 0) || ((currentYear % 100 != 0) && (currentYear % 4 == 0))){
    console.log(currentYear + " 年はうるう年です。");
} else{
    console.log(currentYear + " 年は平年です。");
} 

三項演算子

三項演算子 (条件演算子とも呼ばれます) は、疑問符とコロンで構成されます。構文は次のとおりです。

条件式? 式1 : 式2 ;

「条件式」の結果が真(真)の場合は「式1」のコードを実行し、そうでない場合は「式2」のコードを実行します。

三項演算子の詳細については、 JS 条件演算子 (?:) の説明を参照してください。

サンプルコードは次のとおりです。


例: 

定数:

const X = 11,
      Y = 20;

変数:

let x = 11,
    y = 20;

x > y ? console.log("x は y より大きい") : console.log("x は y より小さい");  // 出力:x は y より小さい 
ビット演算子

Bitwise operator are used to operation on binary bits. JavaScript でサポートされているビット単位の演算子を次の表に示します。

オペレーター 説明
& ビットごとの AND: 対応するバイナリ ビットが両方とも 1 の場合、バイナリ ビットは 1 です。 5 & 1 は 0101 & 0001 に相当します。結果は 0001、10 進数の結果は 1 です。
| | ビットごとの OR: 対応するバイナリ ビットのいずれかが 1 の場合、バイナリ ビットは 1 です。 5 | 1 は 0101 | 0001 に相当します。結果は 0101 で、10 進数では 5 です。
^ ビット単位の XOR: 対応するバイナリ ビットの 1 つだけが 1 の場合、バイナリ ビットは 1 です。 5 ^ 1 は 0101 ^ 0001 に相当し、結果は 0100 になり、10 進数では 4 になります。
ビット単位の NOT: すべてのバイナリ ビットを反転します。つまり、1 は 0 に変換され、0 は 1 に変換されます。 ~5 は ~0101 に相当し、結果は 1010 になり、10 進数では -6 になります。
<< ビット単位の左シフト: すべてのバイナリ ビットを指定されたビット数だけ左に移動し、右端に 0 を追加します。 5 << 1 は 0101 << 1 と同等です。結果は 1010、10 進数の結果は 10 です。
>> ビット単位の右シフト (符号付き右シフト): すべてのバイナリ ビットを指定されたビット数だけ右に移動し、一番左のビットをコピーして左側を埋めます。 5 >> 1 は 0101 と同等です >> 1 は 0010 になり、10 進数では 2 になります
>>> ビットごとの右シフト ゼロ (符号なし右シフト): すべてのバイナリ ビットを指定されたビット数だけ右に移動し、一番左に 0 を追加します。 5 >>> 1 は 0101 と同等 >>> 1 の結果は 0010、10 進数の結果は 2

ビット演算子の詳細については、次を参照してください。

  • JS シフト演算子 (<<、>>、および >>>)
  • JS &、|、^、および ~ (論理ビット演算子)

サンプルコードは次のとおりです。


```
let A = 5 & 1,
    B = 5 | 1,
    C = 5 ^ 1,
    D = ~5,
    E = 5 << 1,
    F = 5 >> 1,
    G = 5 >>> 1;
console.log(A);  // 出力:1
console.log(B);  // 出力:5
console.log(C);  // 出力:4
console.log(D);  // 出力:-6
console.log(E);  // 出力:10
console.log(F);  // 出力:2
console.log(G);  // 出力:2
```

「 JS 演算子のまとめ」についてわかりやすく解説!絶対に観るべきベスト2動画

JavaScriptの条件分岐:補足動画:比較演算子と論理演算子について(サロンの動画使用)
【JavaScript入門】演算子の優先順位を理解しよう #13
https://www.youtube.com/watch?v=kWUACHrQ3dA&pp=ygUfIEpTIOa8lOeul-WtkOOBruOBvuOBqOOCgSZobD1KQQ%3D%3D