Betingede erklæringer i JavaScript: hvis, andet og andet hvis

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

Betingede udsagn i JavaScriptet bestemmer, hvilken kodeblok der kører, ved at teste en betingelse, og if-, if…else- og if…else if…else-formularerne dækker næsten alle forgreningsbeslutninger, som et begynderscript nogensinde vil have brug for.

  • 🔘 Syntaks: En if-sætning kører kun sin blok, når betingelsen i parenteserne evalueres til sand.
  • ☑️ To grene: `if…else`-formen leverer en fallback-blok, der kører, når betingelsen er falsk.
  • ✅ Mange grene: Kædning af ellers if tester flere betingelser i rækkefølge og stopper ved første match.
  • 🧪 Stenografi: Den ternære operator kondenserer en simpel if…else til ét udtryk, der returnerer en værdi.
  • 🛠️ Alternativ: En switch-sætning sammenligner én værdi med mange faste muligheder mere pænt end en lang kæde.
  • 📊 Faldgruber: Falske værdier, en tilfældig tildelingsoperator og manglende parenteser forårsager de fleste betingede fejl.
Læs mere

Betingede erklæringer i JavaScript

JavaScript betingede erklæringer

Der er hovedsageligt tre typer betingede erklæringer i JavaScript.

  1. hvis Erklæring: En 'if'-sætning udfører kode baseret på en betingelse.
  2. hvis ... andet erklæring: If…else-sætningen består af to kodeblokke; når en betingelse er sand, udfører den den første kodeblok, og når betingelsen er falsk, udfører den den anden kodeblok.
  3. hvis ... andet hvis ... andet Erklæring: Når flere betingelser skal testes og forskellige kodeblokke skal udføres baseret på hvilken betingelse der er sand, bruges if…else if…else-sætningen.

Hver af de tre former undersøges nedenfor med sin syntaks og et eksempel, der kan køres. De samme regler gælder, uanset om scriptet kører inde på siden eller i en ekstern fil, og om betingelsen er skrevet på øverste niveau eller inde i en funktion.

Sådan bruger du betingede sætninger

Betingede erklæringer bruges til at bestemme udførelsesflowet baseret på forskellige forhold. Hvis en betingelse er sand, kan du udføre én handling, og hvis betingelsen er falsk, kan du udføre en anden handling.

Diagrammet nedenfor viser denne idé som en vejskillevej: en enkelt betingelse evalueres én gang, og kontrollen bevæger sig ned ad den sande gren eller den falske gren, aldrig begge dele.

Flowchart, der viser et JavaScriptbetingelse forgrener sig til en sand sti og en falsk sti

Hvis erklæring

Syntaks:

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

Du kan bruge if sætning, hvis du kun vil kontrollere en bestemt betingelse. Når udtrykket i parentesen evalueres til true, blokken kører; når den evalueres til false, fortolkeren springer direkte forbi den, og scriptet fortsætter med den næste sætning.

Prøv selv dette:

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

Eksemplet spørger den besøgende om en alder og tester derefter værdien to gange: én gang for 18 år og derover, én gang for under 18 år. Fordi to separate if udsagn bruges snarere end en else, begge betingelser evalueres hver gang siden indlæses.

Moderne ækvivalent: Ovenstående kode bevares nøjagtigt som offentliggjort. I den nuværende JavaScript med samme logik skrives normalt med let or const i stedet for var, med console.log() or textContent i stedet for document.write(), og uden type="text/javascript" attribut, som HTML5 gør valgfri.

Hvis…Ellers-sætning

Syntaks:

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
}

Du kan bruge if...else sætning, hvis du skal kontrollere én betingelse og udføre en anden kodeblok for hvert resultat. Præcis én af de to blokke kører altid, så der kræves ingen separat anden test.

Prøv selv dette:

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

Her new Date().getHours() returnerer det aktuelle timetal for browserens ur som et tal fra 0 til 23. Enhver værdi under 12 producerer morgenhilsenen, og alle andre værdier falder igennem til else afdeling.

Hvis…Ellers Hvis…Ellers-sætning

Syntaks:

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
}

Du kan bruge if...else if...else sætning, hvis du vil kontrollere mere end to betingelser. Betingelserne evalueres fra top til bund, udførelsen stopper ved den første, der er sand, og den sidste else fungerer som en samlebetegnelse, når ingen af ​​dem matcher.

Prøv selv dette:

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

Bemærk de to opkald til parseInt()Værdier returneret af prompt() er strenge, så en sammenligning af dem uden konvertering ville sammenligne tekst i stedet for tal og rapportere "9" som større end "10".

RELATEREDE ARTIKLER

Ternær Operator: En forkortelse for if…else

når en if...else blokken vælger kun mellem to værdier, udtrykker den betingede (ternære) operator den samme beslutning som et enkelt udtryk. Det er den ene JavaEn scriptoperator, der tager tre operander: en betingelse, et spørgsmålstegn, den værdi, der bruges, når betingelsen er sand, et kolon og den værdi, der bruges, når den er falsk.

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

Brug den ternære operator, når det forbedrer læsbarheden, ikke blot for at gemme linjer:

  • God pasform: vælge en af ​​to værdier, der skal tildeles, returneres eller slettes i en skabelonstreng.
  • Dårlig pasform: grene, der kører flere sætninger, kalder funktioner for deres bivirkninger eller har brug for deres egne lokale variabler.
  • Undgå redebygning: En ternær linje inden i en ternær linje er langt sværere at læse end en else if kæde.

switch-sætning vs. if…else if…else

Langs med else if en kæde, der bliver ved med at sammenligne den samme variabel med forskellige faste værdier, er normalt tydeligere som en switch sætning. Switchen evaluerer sit udtryk én gang og hopper derefter til det matchende case; break forhindrer, at henrettelsen falder igennem til den næste sag, og default spiller rollen som den sidste else.

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

De to strukturer er ikke udskiftelige i alle situationer:

Punkt af sammenligning hvis ... andet hvis ... andet skifte
En slags test Ethvert boolsk udtryk, inklusive områder som f.eks. hours<12 Lighed kun mod faste værdier
Sammenligning anvendt Uanset hvilken operator du skriver Streng sammenligning, så "5" stemmer ikke overens 5
Læsbarhed Bedste for et par uafhængige tilstande Bedste for mange værdier af én variabel
Almindelig fejl Glemmer det efterfølgende else Droppet break, hvilket lader udførelsen falde igennem

Sande og falske værdier i JavaScriptbetingelser

En betingelse behøver ikke at være en sammenligning. JavaScriptet konverterer det, det finder i parenteserne, først til en boolsk værdi, hvilket er grunden til if (name) er gyldig kode. Kun seks værdier konverteres til falsk: false, 0, den tomme streng, null, undefinedog NaNAlt andet er sandt, inklusive strengen "0", et tomt array og et tomt objekt.

De fleste betingede fejl i begynderscripts stammer fra en kort liste over fejl:

  • Tildeling i stedet for sammenligning: if (x = 5) tildeler og er altid sandfærdig; if (x === 5) sammenligner.
  • Løse overraskelser i ligestilling: == konverterer typer før sammenligning, så "" == 0 er sandt. Foretrækker ===.
  • Manglende bøjler: uden {} Kun den næste enkeltsætning tilhører grenen, præcis som i eksemplerne ovenfor.
  • Ukonverteret input: værdier fra prompt() og formularfelter er strenge indtil parseInt() or Number() omvender dem.
  • Uopnåelige grene: i en else if kæde, placer den smalleste betingelse først, ellers vil en bredere tidligere test altid vinde.

Ofte Stillede Spørgsmål

En enkelt = tildeler en værdi og gør betingelsen til sandhed ved et uheld. == sammenligner efter konvertering af typer, så "" == 0 er sandt. === sammenligner værdi og type sammen og er den sikrere standard.

AI-assistenter kan gentage en ukendt else if kæde på almindeligt sprog, foreslå de inputværdier, der når hver gren, og marker en betingelse, der aldrig kan være sand. Kør altid koden selv, fordi forklaringen er et forslag snarere end et bevis.

Ofte ja. GitHub Copilot fuldfører forgreningskode fra en kommentar eller en delvis betingelse. Kontroller de grænseværdier, den vælger, da en genereret > hvor du havde brug for >= er let at overse.

Der er ingen sprogbegrænsning. Enhver sætning kan forekomme i en gren, inklusive en yderligere ifUd over to niveauer bliver logikken svær at følge, så kombiner testene med && eller vende tilbage tidligt i stedet.

Nej. Uden parenteser ejer branchen kun den næste enkeltsætning, hvilket er grunden til, at eksemplerne ovenfor fungerer. Det anbefales stadig at tilføje parenteser, fordi en anden linje, der tilføjes senere, lydløst falder uden for branchen.

&& er kun sandt, når begge sider er sandfærdige, og || er sandt, når begge sider er det. Begge kortslutter: højre side evalueres aldrig, når resultatet allerede er bestemt.

getHours() returnerer den aktuelle time på den besøgendes eget ur som et tal fra 0 til 23, så sammenligningen med 12 opdeler dagen i morgen og eftermiddag uden ekstra parsing.

Nej. JavaScriptet bruger to separate nøgleord, else if, med et mellemrum imellem dem. Det enkelte ord elseif tilhører PHP og nogle skabelonsprog og forårsager en syntaksfejl i en browser.

Opsummer dette indlæg med: