JS if else文:条件判定文




 
 
条件判定文は、プログラム開発プロセスで頻繁に使用される文形式であり、ほとんどのプログラミング言語と同様に、 JavaScriptにも条件判定文があります。いわゆる条件判断とは、年齢に応じて異なるコンテンツを表示したり、ブール値の true または false に基づいて操作の成功または失敗を判断したりするなど、プログラムが異なる条件に従って異なる操作を実行することを意味します。

Java Script は、次のさまざまな形式の条件判断ステートメントをサポートしています。

  • if ステートメント;
  • if else ステートメント;
  • if else if else ステートメント;
  • switch case ステートメント。

このセクションでは、主に if、if else、if else if else ステートメントの使用方法を紹介します。switch case ステートメントについては、次のセクションで詳しく紹介します。

if ステートメント

if 文は JavaScript における最も単純な条件判定文であり、その構文形式は次のとおりです。

if(条件式){
// 実行するコード;
}

条件式が true の場合、つまり結果がブール値 true の場合、 { }内のコードが実行されます。

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

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var age = 20;
        if(age >= 18){      // もし age >= 18 がtrueの場合、{ }内のコードを実行する。
            alert("大人です。");
        }
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: if ステートメント
図: if ステートメント

if else ステートメント

if else 文は if 文のバージョンアップであり、式が true のときに実行するコードを指定するだけでなく、式が true でないときに実行するコードも指定できます。構文形式は次のとおりです。 :

if(条件式){
// 式が true の場合に実行するコード
} else {
// 式が false の場合に実行するコード
}

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var now = new Date();           // 現在の完全な日付を取得する
        var dayOfWeek = now.getDay();   // 0から6の数字を取得して、今日が週の何日目かを表す。0は日曜日、1は月曜日、と以降になる
        if (dayOfWeek > 0 && dayOfWeek < 6) {       // 条件分岐:もし今日が月曜日から金曜日の場合、「Have a nice day!」というアラートメッセージを表示させる。そうでなければ、「Have a nice weekend!」と表示させる。
            alert("Have a nice day!");
        } else {
            alert("Have a nice weekend!");
        }
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: if else ステートメント
図: if else ステートメント
if else if else ステートメント

if ステートメントと if else ステートメントには条件式が 1 つだけあり、if else if else ステートメントはより高度な形式であり、if else if else ステートメントで複数の条件式を定義し、結果に従って対応する条件式を実行できます。式のコード、構文形式は次のとおりです。

if (条件式1) {
// 条件式1が真の場合に実行するコード
} else if (条件式2) {
// 条件式2がtrueの場合に実行するコード
}

else if (条件式N) {
// 条件式 N が true の場合に実行するコード
} それ以外 {
// すべての条件式が false の場合に実行するコード
}

ヒント: if else if else ステートメントの実行中に、有効な条件式が見つかると、後続の{ }内のコードが直ちに実行され、その後、if else if else ステートメント全体が終了します。後続のコードの条件式に式が含まれている場合、実行されません。

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

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var now = new Date();           // 現在の完全な日付を取得する
        var dayOfWeek = now.getDay();   // 0-6の数字を取得して、今日が何曜日かを表す。0は日曜日、1は月曜日、以下同様
        if(dayOfWeek == 0) {            // 今日が何曜日か判断する
            alert("日曜日")
        } else if(dayOfWeek == 1) {
            alert("月曜日")
        } else if(dayOfWeek == 2) {
            alert("火曜日")
        } else if(dayOfWeek == 3) {
            alert("水曜日")
        } else if(dayOfWeek == 4) {
            alert("木曜日")
        } else if(dayOfWeek == 5) {
            alert("金曜日")
        } else {
            alert("土曜日")
        }
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: if else if else ステートメント
図: if else if else ステートメント

予防

ネストされた if else を使用する場合、ステートメントが 1 行しかない場合は、条件の曖昧さを避けるために中括弧で囲む必要があります。

たとえば、次の if else のネストは誤解を招きます。

 if(0)
    if(1)
        console.log(1);
else
    console.log(0);
 

上記のコードの場合、JavaScript インタプリタは近接性の原理に従って次の論理レベルに従ってコードを解釈します。

 もし(0)
    もし(1)
        console.log(1);
    でなければ
        console.log(0); 

したがって、中括弧を使用すると、多くの問題を回避できます。

 if(0){
    if(1) console.log(1);
}else{
    console.log(0);
}

もし(0){
  もし(1)console.log(1);
}それ以外の場合{
  console.log(0);
} 
 

「 JS if else文:条件判定文」についてわかりやすく解説!絶対に観るべきベスト2動画