JavaScript if ... else-Anweisung (mit Beispielen)

In diesem Tutorial lernen Sie die if… else-Anweisung zum Erstellen von Entscheidungsprogrammen anhand von Beispielen kennen.

Bei der Computerprogrammierung kann es vorkommen, dass Sie einen Codeblock zwischen mehreren Alternativen ausführen müssen. Zum Beispiel das Zuweisen der Noten A , B oder C basierend auf den von einem Schüler erzielten Noten.

In solchen Situationen können Sie mit der JavaScript- if… elseAnweisung ein Programm erstellen, das Entscheidungen treffen kann.

In JavaScript gibt es drei Formen der if… elseAnweisung.

  1. if- Anweisung
  2. if… else- Anweisung
  3. if… else if… else- Anweisung

JavaScript if-Anweisung

Die Syntax der ifAnweisung lautet:

 if (condition) ( // the body of if )

Die ifAnweisung wertet die Bedingung in der Klammer aus ().

  1. Wenn die Bedingung ausgewertet wird, truewird der Code im Hauptteil von ifausgeführt.
  2. Wenn die Bedingung ausgewertet wird, falsewird der Code im Hauptteil von ifübersprungen.

Hinweis: Der darin enthaltene Code ( )ist der Hauptteil der ifAnweisung.

Arbeitsweise der if-Anweisung

Beispiel 1: if-Anweisung

 // check if the number is positive const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( // the body of the if statement console.log("The number is positive"); ) console.log("The if statement is easy");

Ausgabe 1

 Geben Sie eine Zahl ein: 2 Die Zahl ist positiv Die if-Anweisung ist einfach

Angenommen, der Benutzer hat 2 eingegeben . In diesem Fall ergibt sich die Bedingung number> 0zu true. Und der Hauptteil der ifAnweisung wird ausgeführt.

Ausgabe 2

 Geben Sie eine Zahl ein: -1 Die if-Anweisung ist einfach

Angenommen, der Benutzer hat -1 eingegeben . In diesem Fall ergibt sich die Bedingung number> 0zu false. Daher wird der Text der ifAnweisung übersprungen.

Da console.log("The if statement is easy");es sich außerhalb des Hauptteils der ifAnweisung befindet, wird es immer ausgeführt.

Vergleichs- und logische Operatoren werden unter Bedingungen verwendet. Um mehr über Vergleiche und logische Operatoren zu erfahren, besuchen Sie JavaScript-Vergleich und logische Operatoren.

JavaScript if… else-Anweisung

Eine ifAnweisung kann eine optionale elseKlausel enthalten. Die Syntax der if… elseAnweisung lautet:

 if (condition) ( // block of code if condition is true ) else ( // block of code if condition is false )

Die if… elseAnweisung wertet die Bedingung in der Klammer aus.

Wenn die Bedingung bewertet wird true,

  1. Der Code im Hauptteil von ifwird ausgeführt
  2. Der Code im Hauptteil von elsewird von der Ausführung übersprungen

Wenn die Bedingung bewertet wird false,

  1. Der Code im Hauptteil von elsewird ausgeführt
  2. Der Code im Hauptteil von ifwird von der Ausführung übersprungen
Funktionsweise der if… else-Anweisung

Beispiel 2: if… else-Anweisung

 // check is the number is positive or negative/zero const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( console.log("The number is positive"); ) // if number is not greater than 0 else ( console.log("The number is either a negative number or 0"); ) console.log("The if… else statement is easy");

Ausgabe 1

 Geben Sie eine Zahl ein: 2 Die Zahl ist positiv Die if… else-Anweisung ist einfach

Angenommen, der Benutzer hat 2 eingegeben . In diesem Fall ergibt sich die Bedingung number> 0zu true. Daher wird der Hauptteil der ifAnweisung ausgeführt und der Hauptteil der elseAnweisung übersprungen.

Ausgabe 2

 Geben Sie eine Zahl ein: -1 Die Zahl ist entweder eine negative Zahl oder 0 Die if… else-Anweisung ist einfach

Angenommen, der Benutzer hat -1 eingegeben . In diesem Fall ergibt sich die Bedingung number> 0zu false. Daher wird der Hauptteil der elseAnweisung ausgeführt und der Hauptteil der ifAnweisung übersprungen.

JavaScript if… else if-Anweisung

Die if… elseAnweisung wird verwendet, um einen Codeblock zwischen zwei Alternativen auszuführen. Wenn Sie jedoch zwischen mehr als zwei Alternativen wählen müssen, if… else if… elsekönnen Sie diese verwenden.

Die Syntax der if… else if… elseAnweisung lautet:

 if (condition1) ( // code block 1 ) else if (condition2)( // code block 2 ) else ( // code block 3 )
  • Wenn Bedingung1 ergibt , truewird der Codeblock 1 ausgeführt.
  • Wenn Bedingung1 bis ausgewertet wird false, wird Bedingung2 ausgewertet.
    • Wenn die Bedingung 2 ist true, wird der Codeblock 2 ausgeführt.
    • Wenn die Bedingung 2 ist false, wird der Codeblock 3 ausgeführt.
Funktionieren der if… else if… else-Anweisung

Beispiel 3: if… else if Anweisung

 // check if the number if positive, negative or zero const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( console.log("The number is positive"); ) // check if number is 0 else if (number == 0) ( console.log("The number is 0"); ) // if number is neither greater than 0, nor zero else ( console.log("The number is negative"); ) console.log("The if… else if… else statement is easy");

Ausgabe

 Geben Sie eine Zahl ein: 0 Die Zahl ist 0 Die if… else if… else-Anweisung ist einfach

Angenommen, der Benutzer hat 0 eingegeben , dann wird die erste Testbedingung als number> 0ausgewertet false. Dann wird die zweite Testbedingung number == 0ausgewertet trueund der entsprechende Block ausgeführt.

Verschachtelt, wenn … sonst Anweisung

Sie können auch eine if… elseAnweisung innerhalb einer if… elseAnweisung verwenden. Dies wird als verschachtelte if… else- Anweisung bezeichnet.

Beispiel 4: Verschachtelte if… else-Anweisung

 // check if the number is positive, negative or zero const number = prompt("Enter a number: "); if (number>= 0) ( if (number == 0) ( console.log("You entered number 0"); ) else ( console.log("You entered a positive number"); ) ) else ( console.log("You entered a negative number"); )

Ausgabe

 Enter a number: 5 You entered a positive number

Suppose the user entered 5. In this case, the condition number>= 0 evaluates to true, and the control of the program goes inside the outer if statement.

Then, the test condition, number == 0, of the inner if statement is evaluated. Since it's false, the else clause of the inner if statement is executed.

Note: As you can see, nested if… else makes our logic complicated and we should try to avoid using nested if… else whenever possible.

Body of if… else With Only One Statement

If the body of if… else has only one statement, we can omit ( ) in our programs. For example, you can replace

 const number = 2; if (number> 0) ( console.log("The number is positive."); ) else ( console.log("The number is negative or zero."); )

with

 const number = 2; if (number> 0) console.log("The number is positive."); else console.log("The number is negative or zero.");

Output

 The number is positive.

More on Decision Making

In bestimmten Situationen kann ein ternärer Operator eine if… elseAnweisung ersetzen . Weitere Informationen finden Sie unter JavaScript Ternary Operator.

Wenn Sie basierend auf einer bestimmten Testbedingung zwischen mehr als einer Alternative wählen müssen, kann die switchAnweisung verwendet werden. Weitere Informationen finden Sie unter JavaScript-Schalter.

Interessante Beiträge...