JavaScriptの比較と論理演算子
比較および論理演算子は、trueまたはfalseかをテストする為に使用されます。
比較演算子
比較演算子は、論理ステートメントで使用され、変数または値が等しいかどうかを判断します。
x = 5の場合、次の表で比較演算子について説明します。
| 演算子 | 説明 | 比較する | 戻り値 | それを試してみてください |
|---|---|---|---|---|
| == | に等しい | × == 8 | false | それを試してみてください » |
| × == 5 | true | それを試してみてください » | ||
| x == "5" | true | それを試してみてください » | ||
| === | 等しい値と等しい型 | × === 5 | true | それを試してみてください » |
| ×===「5」 | false | それを試してみてください » | ||
| != | 等しくない | × != 8 | true | それを試してみてください » |
| !== | 等しくない値または等しくない型 | × !== 5 | false | それを試してみてください » |
| ×!==「5」 | true | それを試してみてください » | ||
| × !== 8 | true | それを試してみてください » | ||
| > | より大きい | × > 8 | false | それを試してみてください » |
| < | 未満 | × < 8 | true | それを試してみてください » |
| >= | 以上 | x >= 8 | false | それを試してみてください » |
| <= | 以下 | × <= 8 | true | それを試してみてください » |
どのように使用できますか
条件ステートメントで比較演算子を使用して、値を比較し、結果に応じてアクションを実行できます。
if (age < 18) text = "Too young to buy alcohol";
このチュートリアルの次の章では、条件ステートメントの使用について詳しく学習します。
論理演算子
論理演算子は、変数または値の間の論理を決定するために使用されます。
x = 6とy = 3の場合、次の表で論理演算子について説明します。
| 演算子 | 説明 | 例 | 自分で試してみる |
|---|---|---|---|
| && | かつ | (x < 10 && y > 1) は true | 自分で試してみる » |
| || | または | (x == 5 || y == 5) は false | 自分で試してみる » |
| ! | 否定 | !(x == y)はtrue | 自分で試してみる » |
条件(三項)演算子
JavaScriptには、条件に基づいて変数に値を割り当てる条件演算子も含まれています。
構文
<div> <em>variablename </em>= (<em>condition</em>) ?<em> value1</em>:<em>value2</em> </div>
例
変数ageが18未満の値である場合、変数voteableの値は「若すぎます」になり、それ以外の場合、voteableの値は「十分に古い」になります。
異なるタイプの比較
異なるタイプのデータを比較すると、予期しない結果が生じる場合があります。
文字列を数値と比較する場合、JavaScript は比較を行うときに文字列を数値に変換します。空の文字列は0に変換されます。数値以外の文字列は次のように変換されます。NaNこれは常にfalseです。
|
場合 |
価値 |
試す |
|---|---|---|
| 2 < 12 | true | 自分で試してみる » |
| 2 < "12" | true | 自分で試してみる » |
| 2 <「ジョン」 | false | 自分で試してみる » |
| 2 > "ジョン" | false | 自分で試してみる » |
| 2 == "ジョン" | false | 自分で試してみる » |
| "2" < "12" | false | 自分で試してみる » |
| "2" > "12" | true | 自分で試してみる » |
| "2" == "12" | false | 自分で試してみる » |
2つの文字列を比較すると、(アルファベット順で)1は2より小さいため、「2」は「12」よりも大きくなります。
適切な結果を確保するには、変数を比較する前に適切な型に変換する必要があります。
age = Number(age);
if (isNaN(age)) {
voteable = "Input is not a number";
} else {
voteable = (age < 18) ? "Too young" : "Old enough";
}
Nullish 合体演算子 (??)
??演算子は、変数がnullまたはundefinedである場合に、デフォルトの値を返すために使用されます。
変数がnullまたはundefinedの場合は、2番目の引数を返します。
nullish演算子は、2020年3月以降、すべてのブラウザーでサポートされています。
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| 2020年2月 | 2020年2月 | 2020年1月 | 2020年3月 | 2020年3月 |
オプションの連鎖演算子 (?.)
オブジェクトがorの場合、演算子は(エラーをスローする代わりに)?.を返します。
例
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;
オプションの連鎖演算子は、2020年3月以降、すべてのブラウザーでサポートされています。
| Chrome 80 | Edge 80 | Firefox 72 | Safari13.1 | Opera 67 |
| 2020年2月 | 2020年2月 | 2020年1月 | 2020年3月 | 2020年3月 |