条件文 Javaスクリプト: if、else、else if

⚡ スマートサマリー

条件文 Javaスクリプトは条件をテストすることでどのコードブロックを実行するかを決定します。if、if…else、if…else if…else の形式は、初心者のスクリプト作成者が必要とするほぼすべての分岐判断を網羅しています。

  • 🔘 構文: if文は、括弧内の条件が真と評価された場合にのみ、そのブロックを実行します。
  • ☑️ 2つの支線: if…else形式は、条件が偽の場合に実行されるフォールバックブロックを提供します。
  • 多くの支店: else if文は、複数の条件を順番にテストし、最初に一致した時点で停止します。
  • 🧪 速記: 三項演算子は、単純なif…else文を、値を返す1つの式にまとめます。
  • 🛠️ 代替: switch文は、長い連鎖よりも簡潔に、1つの値を複数の固定オプションと比較します。
  • 📊 落とし穴: 偽値、不要な代入演算子、括弧の欠落などが、条件分岐におけるバグのほとんどを引き起こします。

条件文 Javaスクリプト

Javaスクリプト条件文

条件文には主に3つの種類があります。 Javaスクリプト.

  1. ifステートメント: 「if」ステートメントは、条件に基づいてコードを実行します。
  2. if…elseステートメント: if…else ステートメントは XNUMX つのコード ブロックで構成されます。 条件が true の場合はコードの最初のブロックが実行され、条件が false の場合はコードの XNUMX 番目のブロックが実行されます。
  3. if…else if…else ステートメント: 複数の条件をテストする必要があり、どの条件が true であるかに基づいてコードの異なるブロックを実行する必要がある場合は、if…else if…else ステートメントが使用されます。

以下では、3 つの形式それぞれについて、構文と実行可能な例とともに説明します。スクリプトがどこにあっても同じルールが適用されます。 ページ内または外部ファイル内条件が最上位レベルで記述されているか、または内部で記述されているか function.

条件文の使い方

条件ステートメントは、さまざまな条件に基づいて実行の流れを決定するために使用されます。 条件が true の場合は XNUMX つのアクションを実行でき、条件が false の場合は別のアクションを実行できます。

下の図は、その考え方を分岐点として示しています。単一の条件が一度評価され、制御は真の分岐または偽の分岐のいずれかに進み、両方に進むことはありません。

フローチャートで表示 Javaスクリプト条件が真のパスと偽のパスに分岐する

Ifステートメント

構文:

if(condition)
{
	lines of code to be executed if condition is true
}

あなたが使用することができます if 特定の条件のみをチェックしたい場合は、ステートメントを使用します。括弧内の式が評価されると、 trueブロックが実行されます。評価結果が falseすると、インタープリタはそれをそのままスキップし、スクリプトは次のステートメントに進みます。

これを自分で試してみてください。

<html>
<head>
	<title>IF Statments!!!</title>
	<script type="text/javascript">
		var age = prompt("Please enter your age");
		if(age>=18)
		document.write("You are an adult <br />");
		if(age<18)
		document.write("You are NOT an adult <br />");
	</script>
</head>
<body>
</body>
</html>

この例では、訪問者に年齢を尋ね、その値を 2 回テストします。1 回は 18 以上の場合、もう 1 回は 18 歳未満の場合です。2 つの別々の if ステートメントは、 elseどちらの条件も、ページが読み込まれるたびに評価されます。

現代の同等語: 上記のコードは公開されたとおりに保持されています。 Javaスクリプトは通常同じロジックで記述されます let or const var、と console.log() or textContent document.write()、なしで type="text/javascript" HTML5ではオプションとなった属性。

if…else文

構文:

if(condition)
{
	lines of code to be executed if the condition is true
}
else
{
	lines of code to be executed if the condition is false
}

あなたが使用することができます if...else 条件を一つチェックし、結果ごとに異なるコードブロックを実行する必要がある場合は、このステートメントを使用します。2つのブロックのうち、必ずどちらか一方だけが実行されるため、別途2つ目のテストは必要ありません。

これを自分で試してみてください。

<html>
<head>
	<title>If...Else Statments!!!</title>
	<script type="text/javascript">
		// Get the current hours
		var hours = new Date().getHours();
		if(hours<12)
		document.write("Good Morning!!!<br />");
		else
		document.write("Good Afternoon!!!<br />");
	</script>
</head>
<body>
</body>
</html>

ここに new Date().getHours() ブラウザの時計の現在の時間を 0 から 23 までの数値で返します。12 未満の値はすべて朝の挨拶を生成し、その他の値はすべて次のようになります。 else ブランチ。

もし…そうでなければ もし…そうでなければ 文

構文:

if(condition1)
{
	lines of code to be executed if condition1 is true
}
else if(condition2)
{
	lines of code to be executed if condition2 is true
}
else
{
	lines of code to be executed if condition1 is false and condition2 is false
}

あなたが使用することができます if...else if...else 2つ以上の条件をチェックしたい場合は、ステートメントを使用します。条件は上から順に評価され、最初に真となった条件で実行が停止し、最後の条件が真となります。 else どれにも一致しない場合の包括的な処理として機能します。

これを自分で試してみてください。

<html>
<head>
	<script type="text/javascript">
		var one = prompt("Enter the first number");
		var two = prompt("Enter the second number");
		one = parseInt(one);
		two = parseInt(two);
		if (one == two)
			document.write(one + " is equal to " + two + ".");
		else if (one<two)
			document.write(one + " is less than " + two + ".");
		else
			document.write(one + " is greater than " + two + ".");
	</script>
</head>
<body>
</body>
</html>

2 つの呼び出しに注目してください parseInt(). によって返される値 prompt() これらは文字列なので、変換せずに比較すると、数値ではなくテキストが比較され、「9」は「10」より大きいと報告されます。

ターナリー Operator: if…else の略記

とき if...else ブロックは2つの値から1つだけを選択しますが、条件(三項)演算子は同じ決定を単一の式で表現します。 Java条件、疑問符、条件が真の場合に用いられる値、コロン、条件が偽の場合に用いられる値の 3 つのオペランドを受け取るスクリプト演算子。

// if...else form
let message;
if (age >= 18) {
  message = "adult";
} else {
  message = "minor";
}

// same decision as a ternary expression
let label = age >= 18 ? "adult" : "minor";

三項演算子は、単に行数を減らすためではなく、可読性を向上させるために使用してください。

  • フィット感が良い: テンプレート文字列に割り当てたり、返したり、挿入したりする2つの値のうち1つを選択します。
  • 適合不良: 複数のステートメントを実行する分岐、副作用のために関数を呼び出す分岐、または独自のローカル変数を必要とする分岐。
  • 巣作りは避ける: 三項演算子の中に三項演算子があると、 else if チェーン。

switch文とif…else if…else文の比較

長い else if 同じ変数を異なる固定値と比較し続ける連鎖は、通常、 switch ステートメント。スイッチは式を一度評価し、一致する条件にジャンプします。 case; break 実行が次のケースに流れ込むのを防ぎ、 default 最後の役割を果たす else.

switch (day) {
  case "Sat":
  case "Sun":
    document.write("Weekend");
    break;
  default:
    document.write("Weekday");
}

この2つの構造は、あらゆる状況において互換性があるわけではない。

比較のポイント もし…そうでなければ もし…そうでなければ スイッチ
テストの種類 範囲を含む任意のブール式 hours<12 固定値に対する等価性のみ
比較に使用した どのような演算子でも記述します 厳密に比較すると、 "5" 一致していません 5
読みやすさ いくつかの無関係な症状に最適 1つの変数の多くの値に最適
よくあるバグ 後続を忘れて else 忘れる break実行が失敗する

真実と偽りの価値観 Javaスクリプト条件

条件は必ずしも比較である必要はない。 Javaスクリプトは括弧内のものを最初にブール値に変換するため、 if (name) 有効なコードです。false に変換される値は次の 6 つのみです。 false, 0、空の文字列、 null, undefined, NaNそれ以外のすべては真実であり、文字列も含まれる。 "0"空の配列と空のオブジェクト。

初心者向けスクリプトにおける条件分岐のバグのほとんどは、以下のいくつかの間違いに起因します。

  • 比較ではなく割り当て: if (x = 5) 割り当てを行い、常に真実である。 if (x === 5) 比較します。
  • 緩やかな平等がもたらす驚き: == 比較する前に型を変換するので "" == 0 本当です。 ===.
  • 矯正器具が欠けている: 無し {} 上記の例と同様に、次の単一のステートメントのみが分岐に属します。
  • 変換されていない入力: からの値 prompt() フォームフィールドは文字列です parseInt() or Number() 彼らを改宗させる。
  • アクセスできないブランチ:else if 連鎖的に、最も狭い条件を最初に配置するか、より広い条件を先にテストすると、常に優先されます。

よくあるご質問

シングル = 値を割り当てた結果、偶然にも条件が真となる。 == 型変換後に比較するので、 "" == 0 本当です。 === 値とタイプを一緒に比較し、より安全なデフォルト設定です。

AIアシスタントは、馴染みのない言葉を言い換えることができます。 else if チェーンを分かりやすい英語で説明し、各分岐に到達する入力値を提案し、決して真にならない条件を指摘してください。説明はあくまで提案であり証明ではないため、必ずご自身でコードを実行してください。

多くの場合、はい。 GitHubコパイロット コメントまたは部分条件から分岐コードを完成させます。生成された境界値をチェックしてください。 > 必要な場所 >= 見落としやすい。

言語制限はありません。ブランチ内には、さらに if2 レベルを超えるとロジックが理解しにくくなるので、テストを組み合わせます。 && もしくは、早めに帰ることもできます。

いいえ。中括弧がない場合、分岐は次の単一のステートメントのみを所有するため、上記の例は機能します。ただし、中括弧を追加することをお勧めします。なぜなら、後から追加された2行目は、暗黙のうちに分岐の外側に配置されるからです。

&& 両方の側が真実である場合にのみ真であり、 || どちらの側が真であっても、 は真となる。両方とも短絡評価を行う。結果が既に決定されている場合、右辺は評価されない。

getHours() 訪問者自身の時計の現在の時刻を0から23までの数値として返すので、12と比較することで、追加の解析なしに1日を午前と午後に分割できます。

いいえ。 Javaスクリプトは2つの別々のキーワードを使用します。 else if間にスペースを空けて。単語1つ elseif PHPや一部のテンプレート言語に属し、ブラウザで構文エラーを発生させます。