TECH I.S.

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 = 6y = 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>

let voteable = (age < 18) ? "Too young":"Old enough";

変数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番目の引数を返します。

let name = null; let text = "missing"; let result = name ?? text;

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月


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細