Instrukcja JavaScript if ... else (z przykładami)

W tym samouczku nauczysz się na przykładach instrukcji if… else do tworzenia programów decyzyjnych.

W programowaniu komputerowym mogą wystąpić sytuacje, w których trzeba będzie uruchomić blok kodu spośród więcej niż jednej alternatywy. Na przykład wystawianie ocen A , B lub C na podstawie ocen uzyskanych przez ucznia.

W takich sytuacjach można użyć instrukcji JavaScript if… elsedo stworzenia programu, który może podejmować decyzje.

W JavaScript istnieją trzy formy if… elseinstrukcji.

  1. jeśli oświadczenie
  2. if… else oświadczenie
  3. if… else if… else oświadczenie

JavaScript if Instrukcja

Składnia ifinstrukcji to:

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

ifSprawozdanie ocenia stan wewnątrz nawiasu ().

  1. Jeśli warunek jest oceniany na true, wykonywany jest kod wewnątrz treści if.
  2. Jeśli warunek jest oceniany na false, kod wewnątrz treści ifjest pomijany.

Uwaga: kod wewnątrz ( )jest treścią ifinstrukcji.

Działanie instrukcji if

Przykład 1: if Instrukcja

 // 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");

Wyjście 1

 Wpisz liczbę: 2 Liczba jest dodatnia. Instrukcja if jest łatwa

Załóżmy, że użytkownik wprowadził 2 . W tym przypadku warunek ma number> 0wartość true. Treść ifinstrukcji jest wykonywana.

Wyjście 2

 Wpisz liczbę: -1 Instrukcja if jest łatwa

Załóżmy, że użytkownik wprowadził -1 . W tym przypadku warunek ma number> 0wartość false. W związku z tym iftreść instrukcji jest pomijana.

Ponieważ console.log("The if statement is easy");znajduje się poza treścią ifinstrukcji, jest zawsze wykonywana.

W warunkach używane są operatory porównania i logiczne. Aby dowiedzieć się więcej o porównaniu i operatorach logicznych, odwiedź stronę Porównanie JavaScript i operatory logiczne.

JavaScript if… else oświadczenie

ifStwierdzenie może mieć opcjonalnej elseklauzuli. Składnia if… elseinstrukcji to:

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

if… elseSprawozdanie ocenia stan wewnątrz nawiasu.

Jeśli warunek jest oceniany jako true,

  1. kod wewnątrz korpusu ifjest wykonywany
  2. kod wewnątrz treści elsejest pomijany podczas wykonywania

Jeśli warunek jest oceniany jako false,

  1. kod wewnątrz korpusu elsejest wykonywany
  2. kod wewnątrz treści ifjest pomijany podczas wykonywania
Działanie instrukcji if… else

Przykład 2: if… else Instrukcja

 // 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");

Wyjście 1

 Wprowadź liczbę: 2 Liczba jest dodatnia. Instrukcja if… else jest łatwa

Załóżmy, że użytkownik wprowadził 2 . W tym przypadku warunek ma number> 0wartość true. Stąd treść ifinstrukcji jest wykonywana, a treść elseinstrukcji jest pomijana.

Wyjście 2

 Wprowadź liczbę: -1 Liczba jest liczbą ujemną lub 0 Instrukcja if… else jest łatwa

Załóżmy, że użytkownik wprowadził -1 . W tym przypadku warunek ma number> 0wartość false. Stąd treść elseinstrukcji jest wykonywana, a treść ifinstrukcji jest pomijana.

JavaScript if… else if instrukcja

if… elseZestawienie służy do wykonywania blok kodu między dwiema alternatywami. Jeśli jednak musisz dokonać wyboru między więcej niż dwiema alternatywami, if… else if… elsemożesz użyć.

Składnia if… else if… elseinstrukcji to:

 if (condition1) ( // code block 1 ) else if (condition2)( // code block 2 ) else ( // code block 3 )
  • Jeśli wynik warunku1 wyniesie true, blok kodu 1 jest wykonywany.
  • Jeśli warunek1 ocenia się false, a następnie warunek2 jest oceniany.
    • Jeśli warunek 2 jest spełnionytrue , blok kodu 2 jest wykonywany.
    • Jeśli warunek 2 jest spełnionyfalse , blok kodu 3 jest wykonywany.
Działanie instrukcji if… else if… else

Przykład 3: if… else if Statement

 // 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");

Wynik

 Wpisz liczbę: 0 Liczba to 0 Instrukcja if… else if… else jest łatwa

Załóżmy, że użytkownik wprowadził 0 , a następnie pierwszy warunek testu zostanie number> 0oceniony jako false. Następnie drugi warunek testowy jest number == 0oceniany truei wykonywany jest odpowiadający mu blok.

Zagnieżdżone if… else Instrukcja

Możesz również użyć if… elseinstrukcji wewnątrz if… elseinstrukcji. Jest to znane jako zagnieżdżona instrukcja if… else .

Przykład 4: zagnieżdżona instrukcja if… else

 // 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"); )

Wynik

 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

W niektórych sytuacjach operator trójskładnikowy może zastąpić if… elseinstrukcję. Aby dowiedzieć się więcej, odwiedź stronę Operator trójargumentowy JavaScript.

Jeśli musisz dokonać wyboru między więcej niż jedną alternatywą na podstawie danego warunku testu, switchmożesz użyć instrukcji. Aby dowiedzieć się więcej, odwiedź JavaScript switch.

Interesujące artykuły...