ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

条件分岐: if、「?」

著者：Eve Cole 更新時間：2025-01-09 15:52:22

場合によっては、さまざまな条件に基づいてさまざまなアクションを実行する必要があります。

これを行うには、 ifステートメントと条件演算子?を使用できます。 、これは「疑問符」演算子とも呼ばれます。

「if」ステートメント

if(...)ステートメントは括弧内の条件を評価し、結果がtrue場合はコード ブロックを実行します。

例えば：

 let year = プロンプト('ECMAScript-2015 仕様は何年に発行されましたか?', '');

if (年 == 2015)alert( 'あなたは正しい!' );

上の例では、条件は単純な等価性チェック ( year == 2015 ) ですが、さらに複雑になる可能性があります。

複数のステートメントを実行したい場合は、コード ブロックを中括弧で囲む必要があります。

 if (年 == 2015) {
  alert( "その通りです!" );
  alert( "あなたはとても賢いですね!" );
}

ifステートメントを使用するたびに、実行するステートメントが 1 つしかない場合でも、コード ブロックを中括弧{}で囲むことをお勧めします。そうすることで可読性が向上します。

ブール変換

if (…)ステートメントは、括弧内の式を評価し、結果をブール値に変換します。

「型変換」の章の変換規則を思い出してください。

  • 数値0 、空の文字列"" 、 null 、 undefined 、およびNaNすべてfalseになります。そのため、それらは「偽の」値と呼ばれます。

  • 他の値はtrueになるため、「truthy」と呼ばれます。

したがって、この条件下のコードは決して実行されません。

 if (0) { // 0 は偽です
  ...
}

…そしてこの条件内では、常に次のようになります。

 if (1) { // 1 は真実です
  ...
}

次のように、事前評価されたブール値をifに渡すこともできます。

 cond = (年 == 2015) とします。 // 等価性は true または false に評価されます

if (条件) {
  ...
}

「else」節

ifステートメントには、オプションのelseブロックを含めることができます。条件が false の場合に実行されます。

例えば：

 let year = プロンプト('ECMAScript-2015 仕様は何年に発行されましたか?', '');

if (年 == 2015) {
  alert( 'あなたの予想は正しかったです!' );
} それ以外 {
  alert( 'どうしてそんなに間違っているのですか?' ); // 2015 以外の任意の値
}

いくつかの条件: 「else if」

場合によっては、条件のいくつかのバリエーションをテストしたいことがあります。 else if節を使用すると、それが可能になります。

例えば：

 let year = プロンプト('ECMAScript-2015 仕様は何年に発行されましたか?', '');

if (年 < 2015) {
  alert( '早すぎる...' );
} else if (年 > 2015) {
  alert( '遅すぎます' );
} それ以外 {
  alert( 'その通り!' );
}

上記のコードでは、JavaScript は最初にyear < 2015をチェックします。それが偽の場合は、次の条件year > 2015に進みます。それも偽の場合は、最後のalertが表示されます。

他にもelse ifブロックがある可能性があります。最後のelseオプションです。

条件演算子「?」

場合によっては、条件に応じて変数を割り当てる必要があります。

例えば：

アクセスを許可します;
let age = プロンプト('あなたは何歳ですか?', '');

if (年齢 > 18) {
  アクセス許可 = true;
} それ以外 {
  アクセス許可 = false;
}

アラート(アクセス許可);

いわゆる「条件」または「疑問符」演算子を使用すると、これをより短く簡単な方法で行うことができます。

演算子は疑問符?で表されます。 。演算子には 3 つのオペランドがあるため、「三項」と呼ばれることもあります。実際、これだけ多くの演算子がある JavaScript の演算子はこれだけです。

構文は次のとおりです。

結果 = 条件としますか?値1 : 値2;

conditionが評価され、それが真実であればvalue1が返され、それ以外の場合はvalue2返されます。

例えば：

 let accessAllowed = (年齢 > 18) ? true : false;

技術的には、 age > 18前後のかっこを省略できます。疑問符演算子は優先順位が低いため、比較>の後に実行されます。

この例は、前の例と同じことを行います。

 // とにかく比較演算子「age > 18」が最初に実行されます
// (括弧で囲む必要はありません)
accessAllowed = 年齢 > 18 にしますか? true : false;

ただし、括弧を使用するとコードが読みやすくなるため、括弧を使用することをお勧めします。

ご注意ください：

上の例では、比較自体がtrue/falseを返すため、疑問符演算子の使用を避けることができます。

 // 同じ
accessAllowed = 年齢 > 18 にします。

複数 '？'

一連の疑問符演算子?複数の条件に依存する値を返すことができます。

例えば：

年齢 = プロンプト('年齢?', 18);

let メッセージ = (年齢 < 3) ? 「やあ、ベイビー！」 :
  (18歳未満) ? 'こんにちは！' :
  (年齢 < 100) ? 「こんにちは！」 :
  「なんと珍しい年齢だろう！」

アラート(メッセージ);

最初は何が起こっているのか理解するのが難しいかもしれません。しかし、よく見てみると、これは単なる通常の一連のテストであることがわかります。

  1. 最初の疑問符は、 age < 3かどうかをチェックします。

  2. true の場合 – 'Hi, baby!'を返します。 。それ以外の場合は、コロン「:」の後の式に進み、 age < 18をチェックします。

  3. それが真の場合、 'Hello!'が返されます。 。それ以外の場合は、次のコロン「:」の後の式に進み、 age < 100をチェックします。

  4. それが本当であれば、 'Greetings!'が返されます。 。それ以外の場合は、最後のコロン「:」の後の式に続き、 'What an unusual age!'を返します。 。

if..else使用すると、次のようになります。

 if (年齢 < 3) {
  message = 'こんにちは、ベイビー！';
} else if (年齢 < 18) {
  メッセージ = 'こんにちは!';
} else if (年齢 < 100) {
  message = 'こんにちは!';
} それ以外 {
  message = 'なんと異常な年齢だろう!';
}

従来とは異なる「?」の使用

時々疑問符? ifの代わりに使用されます。

 let company = プロンプト('JavaScript を作成した会社はどこですか?', '');

(会社 == 'ネットスケープ') ?
   アラート('正しい!') : アラート('間違っています。');

company == 'Netscape'条件に応じて、 ?の後の最初または 2 番目の式のいずれかが決まります。が実行され、アラートが表示されます。

ここでは結果を変数に代入しません。代わりに、条件に応じて異なるコードを実行します。

この方法で疑問符演算子を使用することはお勧めできません。

この表記は同等のifステートメントよりも短いため、一部のプログラマにとっては魅力的です。しかし、可読性は低くなります。

比較のためにif使用した同じコードを次に示します。

 let company = プロンプト('JavaScript を作成した会社はどこですか?', '');

if (会社 == 'Netscape') {
  アラート('そうです!');
} それ以外 {
  アラート('間違っています。');
}

私たちの目はコードを垂直にスキャンします。数行にわたるコード ブロックは、水平方向に長い命令セットよりも理解しやすいです。

疑問符演算子の目的は?条件に応じて 1 つの値または別の値を返すことです。まさにそんな用途にご利用ください。コードのさまざまなブランチを実行する必要がある場合は、 if使用します。

タスク

if (ゼロを含む文字列)

重要度: 5

alert表示されますか?

 if ("0") {
  アラート( 'こんにちは' );
}

はい、そうなります。

空の文字列 (および"0"は空ではない) を除くすべての文字列は、論理コンテキストではtrueになります。

以下を実行して確認できます。

 if ("0") {
  アラート( 'こんにちは' );
}

JavaScriptの名前

重要性: 2

if..else構造を使用して、「JavaScript の「正式な」名前は何ですか?」という質問をするコードを作成します。

訪問者が「ECMAScript」と入力した場合は「Right!」と出力され、それ以外の場合は次のように出力されます。 ECMAScript!」

新しいウィンドウでのデモ

<!DOCTYPE html>
<html>

<本文>
  <スクリプト>
    '厳密を使用';

    let value =prompt('JavaScript の「正式な」名前は何ですか?', '');

    if (値 == 'ECMAScript') {
      アラート('そうです!');
    } それ以外 {
      alert("知らないの? ECMAScript!");
    }
  </script>


</body>

</html>

サインを見せて

重要性: 2

if..elseを使用して、 prompt経由で数値を取得し、 alertに表示するコードを作成します。

  • 1 、値がゼロより大きい場合、

  • -1 (ゼロ未満の場合)

  • 0 (ゼロに等しい場合)。

このタスクでは、入力は常に数値であると想定します。

新しいウィンドウでのデモ

let value = プロンプト('数値を入力', 0);

if (値 > 0) {
  アラート(1);
else if (値 < 0) {
  アラート( -1 );
} それ以外 {
  アラート( 0 );
}

「if」を「?」に書き換えます。

重要度: 5

条件演算子'?'を使用するifこれを書き換えます。 :

結果をみましょう。

if (a + b < 4) {
  結果 = '以下';
} それ以外 {
  結果 = 'オーバー';
}

結果 = (a + b < 4) としますか? 「下」 : 「上」;

「if..else」を「?」に書き換えます。

重要度: 5

複数の三項演算子'?'を使用してif..else書き換えます。 。

読みやすくするために、コードを複数行に分割することをお勧めします。

メッセージを送りましょう。

if (ログイン == '従業員') {
  メッセージ = 'こんにちは';
} else if (login == 'ディレクター') {
  メッセージ = 'ご挨拶';
} else if (ログイン == '') {
  メッセージ = 'ログインなし';
} それ以外 {
  メッセージ = '';
}

let message = (login == '従業員') ? 'こんにちは' ：
  (ログイン == 'ディレクター') ? 「ご挨拶」 :
  (ログイン == '') ? 「ログインなし」:
  '';
関連記事