Podmíněné příkazy v JavaScénář: if, else a else if

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Podmíněné příkazy v JavaSkript rozhoduje, který blok kódu se spustí, testováním podmínky a formuláře if, if…else a if…else if…else pokrývají téměř každé rozhodnutí o větvení, které bude začínající skript kdy potřebovat.

  • 🔘 Syntaxe: Příkaz if spustí svůj blok pouze tehdy, když je podmínka uvnitř závorek vyhodnocena jako pravdivá.
  • ☑️ Dvě větve: Formulář if…else poskytuje záložní blok, který se spustí vždy, když je podmínka nepravdivá.
  • (Tj. Mnoho poboček: Řetězení else if testuje několik podmínek postupně a zastaví se na první shodě.
  • 🧪 Těsnopis: Ternární operátor zhušťuje jednoduchý operátor if…else do jednoho výrazu, který vrací hodnotu.
  • 🛠️ alternativa: Příkaz switch porovnává jednu hodnotu s mnoha pevnými možnostmi elegantněji než dlouhý řetězec.
  • 📊 Úskalí: Falešné hodnoty, zbloudilý operátor přiřazení a chybějící závorky způsobují většinu chyb v podmíněných funkcích.
Přečíst více

Podmíněné příkazy v JavaScénář

JavaSkript podmíněné příkazy

Existují hlavně tři typy podmíněných příkazů JavaScénář.

  1. if Prohlášení: Příkaz 'if' spustí kód na základě podmínky.
  2. pokud…jinak prohlášení: Příkaz if...else se skládá ze dvou bloků kódu; když je podmínka pravdivá, provede první blok kódu a když je podmínka nepravdivá, provede druhý blok kódu.
  3. if… else if… else Prohlášení: Když je třeba otestovat více podmínek a je třeba provést různé bloky kódu na základě toho, která podmínka je pravdivá, použije se příkaz if...else if...else.

Každá ze tří forem je níže zkoumána spolu se syntaxí a spustitelným příkladem. Stejná pravidla platí bez ohledu na to, zda se skript nachází uvnitř stránky nebo v externím souborua zda je podmínka zapsána na nejvyšší úrovni nebo uvnitř funkce.

Jak používat podmíněné příkazy

Podmíněné příkazy se používají k rozhodování o průběhu provádění na základě různých podmínek. Pokud je podmínka pravdivá, můžete provést jednu akci a pokud je podmínka nepravdivá, můžete provést jinou akci.

Níže uvedený diagram znázorňuje tuto myšlenku jako rozcestí: jedna podmínka se vyhodnotí jednou a řízení se dále táhne buď po pravé, nebo po falešné větvi, nikdy ne oběma oběma.

Vývojový diagram znázorňující JavaPodmínka skriptu se větví na skutečnou a falešnou cestu

Pokud prohlášení

Syntaxe:

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

Můžeš použít if příkaz, pokud chcete zkontrolovat pouze specifickou podmínku. Když se výraz v závorkách vyhodnotí jako true, blok se spustí; když se vyhodnotí jako false, interpret jej rovnou přeskočí a skript pokračuje dalším příkazem.

Zkuste toto:

<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>

Příklad se návštěvníka ptá na věk a poté tuto hodnotu testuje dvakrát: jednou pro 18 a více let, jednou pro méně než 18 let. Protože dva oddělené if používají se spíše než příkazy else, obě podmínky se vyhodnocují při každém načtení stránky.

Moderní ekvivalent: Výše uvedený kód je zachován přesně tak, jak byl publikován. V aktuálním JavaSkript se stejnou logikou je obvykle psán se let or const místo vars console.log() or textContent místo document.write(), a bez type="text/javascript" atribut, který je v HTML5 volitelný.

Příkaz If…Else

Syntaxe:

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
}

Můžete použít if...else příkaz, pokud musíte zkontrolovat jednu podmínku a pro každý výsledek spustit jiný blok kódu. Vždy se spustí přesně jeden ze dvou bloků, takže není nutný žádný samostatný druhý test.

Zkuste toto:

<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>

Zde new Date().getHours() vrací aktuální hodinu prohlížeče jako číslo od 0 do 23. Jakákoli hodnota menší než 12 vygeneruje ranní pozdrav a všechny ostatní hodnoty se převedou na else větev.

Příkaz If…Else If…Else

Syntaxe:

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
}

Můžete použít if...else if...else příkaz, pokud chcete zkontrolovat více než dvě podmínky. Podmínky se vyhodnocují odshora dolů, provádění se zastaví u první, která je pravdivá, a u poslední else funguje jako univerzální řešení, když se žádný z nich neshoduje.

Zkuste toto:

<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>

Všimněte si dvou volání funkce parseInt()Hodnoty vrácené funkcí prompt() jsou řetězce, takže jejich porovnání bez převodu by porovnávalo text spíše než čísla a hodnota „9“ by byla větší než „10“.

SOUVISEJÍCÍ ČLÁNKY

Trojice Operator: Zkratka pro if…else

Když je if...else Blok volí pouze mezi dvěma hodnotami, podmíněný (ternární) operátor vyjadřuje stejné rozhodnutí jako jediný výraz. Je to ta jedna JavaSkriptový operátor, který přijímá tři operandy: podmínku, otazník, hodnotu použitou, když je podmínka pravdivá, dvojtečku a hodnotu použitou, když je podmínka nepravdivá.

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

Ternární operátor používejte, když to zlepšuje čitelnost, ne jen pro úsporu řádků:

  • Dobré uchycení: výběr jedné ze dvou hodnot, které se mají přiřadit, vrátit nebo vložit do řetězce šablony.
  • Špatné uchycení: větve, které spouštějí několik příkazů, volají funkce pro své vedlejší efekty nebo potřebují vlastní lokální proměnné.
  • Vyhněte se vnořování: Ternární systém uvnitř ternáru je mnohem obtížnější číst než else if řetěz.

Příkaz switch vs. if…else if…else

Dlouho else if Řetězec, který neustále porovnává stejnou proměnnou s různými pevnými hodnotami, je obvykle přehlednější jako switch příkaz. Funkce switch jednou vyhodnotí svůj výraz a poté přeskočí na odpovídající výraz. case; break zastaví propadnutí provedení do dalšího případu a default hraje roli finále else.

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

Tyto dvě struktury nejsou v každé situaci zaměnitelné:

Bod srovnání pokud…jinak pokud…jinak přepnout
Druh testu Jakýkoli booleovský výraz, včetně rozsahů, jako například hours<12 Rovnost pouze proti pevným hodnotám
Použité srovnání Ať už napíšete jakýkoli operátor Přísné srovnání, takže "5" neshoduje se 5
čitelnost Nejlepší pro několik nesouvisejících stavů Nejlepší pro mnoho hodnot jedné proměnné
Běžná chyba Zapomínání na zadní část else Zapomínání break, což umožňuje, aby se provedení zhroutilo

Pravdivé a falešné hodnoty v JavaPodmínky skriptu

Podmínka nemusí být srovnání. JavaSkript nejprve převede vše, co najde v závorkách, na booleovskou hodnotu, a proto if (name) je platný kód. Pouze šest hodnot se převede na false: false, 0, prázdný řetězec, null, undefined, a NaNVšechno ostatní je pravdivé, včetně řetězce. "0", prázdné pole a prázdný objekt.

Většina podmíněných chyb ve skriptech pro začátečníky pochází z krátkého seznamu chyb:

  • Přiřazení místo srovnání: if (x = 5) přiřazuje a je vždy pravdivý; if (x === 5) srovnává.
  • Překvapení z hlediska volné rovnosti: == převádí typy před porovnáním, takže "" == 0 je pravda. Preferuji ===.
  • Chybějící rovnátka: bez {} pouze další jeden příkaz patří do větve, přesně jako ve výše uvedených příkladech.
  • Nekonvertovaný vstup: hodnoty z prompt() a pole formuláře jsou řetězce, dokud parseInt() or Number() převádí je.
  • Nedosažitelné větve: v else if V řetězci umístěte nejužší podmínku jako první, jinak vždy zvítězí širší dřívější test.

Nejčastější dotazy

Single = přiřadí hodnotu a náhodou učiní podmínku pravdivou. == porovnává po převodu typů, takže "" == 0 je pravda. === porovnává hodnotu a typ dohromady a je bezpečnější výchozí volbou.

Asistenti s umělou inteligencí mohou zopakovat neznámé else if řetězec v jednoduché angličtině, navrhněte vstupní hodnoty, které dosáhnou každé větve, a označte podmínku, která nikdy nemůže být pravdivá. Vždy spusťte kód sami, protože vysvětlení je spíše návrh než důkaz.

Často ano. GitHub Copilot dokončí větvení kódu z komentáře nebo částečné podmínky. Zkontrolujte hraniční hodnoty, které vybere, protože vygenerovaný > kde jsi potřeboval/a >= je snadné přehlédnout.

Neexistuje žádné jazykové omezení. Uvnitř větve se může objevit jakýkoli příkaz, včetně dalšího ifZa hranicí dvou úrovní je logika obtížně sledovatelná, proto kombinujte testy s... && nebo se raději vraťte dříve.

Ne. Bez závorek větev vlastní pouze následující příkaz, a proto výše uvedené příklady fungují. Přidání závorek se stále doporučuje, protože druhý řádek přidaný později tiše spadne mimo větev.

&& je pravdivé pouze tehdy, když mají pravdu obě strany, a || platí, když je kterákoli ze stran pravdivá. Zkrat na obou stranách: pravá strana se nikdy nevyhodnocuje, jakmile je výsledek již rozhodnut.

getHours() vrací aktuální hodinu návštěvníkova času jako číslo od 0 do 23, takže porovnání s 12 rozdělí den na dopoledne a odpoledne bez další analýzy.

Ne. JavaSkript používá dvě samostatná klíčová slova, else if, s mezerou mezi nimi. Jedno slovo elseif patří k PHP a některým jazykům šablon a v prohlížeči vyvolává syntaktickou chybu.

Shrňte tento příspěvek takto: