Instructions conditionnelles dans JavaScript : si, sinon, et sinon si

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Les instructions conditionnelles dans JavaLe script détermine quel bloc de code s'exécute en testant une condition, et les formes if, if…else et if…else if…else couvrent presque toutes les décisions de branchement dont un script débutant aura besoin.

  • (I.e. syntaxe: Une instruction if n'exécute son bloc que lorsque la condition entre parenthèses est vraie.
  • ☑️ Deux branches : La structure if…else fournit un bloc de repli qui s'exécute chaque fois que la condition est fausse.
  • ✅ De nombreuses branches : L'enchaînement de « else if » teste plusieurs conditions dans l'ordre et s'arrête à la première correspondance.
  • 🧪 Sténographie: L'opérateur ternaire condense une simple instruction if…else en une seule expression qui renvoie une valeur.
  • ️ Alternative: Une instruction switch compare une valeur à de nombreuses options fixes de manière plus élégante qu'une longue chaîne.
  • (I.e. Pièges Les valeurs fausses, un opérateur d'affectation égaré et des accolades manquantes sont à l'origine de la plupart des erreurs conditionnelles.
En savoir plus

Instructions conditionnelles dans Javascénario

JavaInstructions conditionnelles de script

Il existe principalement trois types d'instructions conditionnelles dans Javascénario.

  1. si déclaration: Une instruction 'if' exécute du code en fonction d'une condition.
  2. si… sinon déclaration: L'instruction if…else se compose de deux blocs de code ; lorsqu'une condition est vraie, il exécute le premier bloc de code et lorsque la condition est fausse, il exécute le deuxième bloc de code.
  3. si…sinon si…sinon Déclaration: Lorsque plusieurs conditions doivent être testées et que différents blocs de code doivent être exécutés en fonction de la condition qui est vraie, l'instruction if…else if…else est utilisée.

Chacune des trois formes est examinée ci-dessous, avec sa syntaxe et un exemple exécutable. Les mêmes règles s'appliquent, que le script soit placé dans à l'intérieur de la page ou dans un fichier externeet si la condition est écrite au niveau supérieur ou à l'intérieur d'un fonction.

Comment utiliser les instructions conditionnelles

Les instructions conditionnelles sont utilisées pour décider du flux d'exécution en fonction de différentes conditions. Si une condition est vraie, vous pouvez effectuer une action et si la condition est fausse, vous pouvez effectuer une autre action.

Le diagramme ci-dessous illustre cette idée comme une bifurcation : une seule condition est évaluée une fois, et le contrôle emprunte soit la branche vraie, soit la branche fausse, jamais les deux.

Organigramme montrant un JavaLa condition du script se divise en un chemin vrai et un chemin faux.

Si déclaration

syntaxe:

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

Vous pouvez utiliser if Utilisez cette instruction si vous souhaitez vérifier uniquement une condition spécifique. Lorsque l'expression entre parenthèses est évaluée à true, le bloc s'exécute ; lorsqu'il est évalué à falseL'interpréteur passe directement à l'instruction suivante, et le script continue.

Essayez ceci vous-même :

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

L'exemple demande l'âge du visiteur, puis vérifie cette valeur deux fois : une fois pour 18 ans et plus, une fois pour moins de 18 ans. Car il s'agit de deux vérifications distinctes. if des déclarations sont utilisées plutôt qu'une elseLes deux conditions sont évaluées à chaque chargement de la page.

Équivalent moderne : Le code ci-dessus est conservé exactement tel que publié. Dans la version actuelle JavaLe même schéma logique est généralement écrit avec let or const au lieu de var(la prise en charge console.log() or textContent au lieu de document.write(), et sans le type="text/javascript" attribut, que HTML5 rend facultatif.

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

Vous pouvez utiliser le if...else Cette instruction est utile si vous devez vérifier une condition et exécuter un bloc de code différent pour chaque résultat. Un seul des deux blocs est toujours exécuté ; un second test n’est donc pas nécessaire.

Essayez ceci vous-même :

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

Ici new Date().getHours() Renvoie l'heure actuelle de l'horloge du navigateur sous forme de nombre compris entre 0 et 23. Toute valeur inférieure à 12 affiche le message de bienvenue du matin, et toutes les autres valeurs sont converties en message d'accueil. else branche.

Instruction Si…Sinon Si…Sinon

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
}

Vous pouvez utiliser le if...else if...else Utilisez cette instruction si vous souhaitez vérifier plus de deux conditions. Les conditions sont évaluées de haut en bas, l'exécution s'arrête à la première condition vraie, et la dernière else sert de solution de repli lorsqu'aucune ne correspond.

Essayez ceci vous-même :

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

Notez les deux appels à parseInt(). Valeurs renvoyées par prompt() Ce sont des chaînes de caractères, donc les comparer sans conversion reviendrait à comparer du texte plutôt que des nombres et indiquerait que « 9 » est supérieur à « 10 ».

ARTICLES LIÉS

Ternaire Operator : une abréviation pour si…sinon

Lorsqu'un if...else Le bloc ne choisit qu'entre deux valeurs, l'opérateur conditionnel (ternaire) exprime la même décision par une seule expression. C'est celui-ci. JavaOpérateur de script qui prend trois opérandes : une condition, un point d’interrogation, la valeur utilisée lorsque la condition est vraie, un deux-points et la valeur utilisée lorsqu’elle est fausse.

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

Utilisez l'opérateur ternaire lorsqu'il améliore la lisibilité, et non simplement pour gagner des lignes :

  • Bon ajustement : Choisir l'une des deux valeurs à affecter, à renvoyer ou à insérer dans une chaîne de modèle.
  • Mauvaise coupe : branches qui exécutent plusieurs instructions, appellent des fonctions pour leurs effets de bord ou ont besoin de leurs propres variables locales.
  • Évitez de faire des nids : Un ternaire à l'intérieur d'un autre ternaire est beaucoup plus difficile à lire qu'un autre. else if chaîne.

Instruction switch vs if…else if…else

Un long else if Une chaîne qui compare constamment la même variable à différentes valeurs fixes est généralement plus claire sous forme de switch instruction. L'instruction switch évalue son expression une fois, puis passe à l'instruction correspondante. case; break empêche l'exécution de se poursuivre dans le cas suivant, et default joue le rôle du final else.

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

Les deux structures ne sont pas interchangeables dans toutes les situations :

Point de comparaison si…sinon si…sinon interrupteur
Genre d'épreuve Toute expression booléenne, y compris les plages telles que hours<12 Égalité uniquement par rapport aux valeurs fixes
Comparaison utilisée Quel que soit l'opérateur que vous écrivez Comparaison stricte, donc "5" ne correspond pas 5
lisibilité Meilleur pour quelques affections sans rapport entre elles Meilleur pour de nombreuses valeurs d'une variable
Bug courant Oublier la traînée else Oubli break, ce qui permet à l'exécution de se dérouler sans problème

Valeurs vraies et fausses dans JavaConditions du script

Une condition n'est pas forcément une comparaison. JavaLe script convertit d'abord en booléen tout ce qu'il trouve entre parenthèses, et c'est pourquoi if (name) est un code valide. Seules six valeurs sont converties en faux : false, 0, la chaîne vide, null, undefined et NaNTout le reste est véridique, y compris la chaîne de caractères. "0", un tableau vide et un objet vide.

La plupart des bugs conditionnels dans les scripts pour débutants proviennent d'une courte liste d'erreurs :

  • Attribution plutôt que comparaison : if (x = 5) assigne et est toujours véridique ; if (x === 5) compare.
  • L'égalité souple surprend : == convertit les types avant de comparer, donc "" == 0 C'est vrai. Préférez ===.
  • Appareil dentaire manquant : sans {} Seule l'instruction suivante appartient à la branche, exactement comme dans les exemples ci-dessus.
  • Entrée non convertie : valeurs de prompt() et les champs de formulaire sont des chaînes de caractères jusqu'à parseInt() or Number() les convertit.
  • Branches inaccessibles : dans un else if En chaîne, placez d'abord la condition la plus restrictive, sinon un test plus large effectué plus tôt l'emportera toujours.

FAQ

Un célibataire ou Individual = attribue une valeur et rend la condition vraie par accident. == compare après conversion des types, donc "" == 0 est vrai. === compare la valeur et le type ensemble et constitue la valeur par défaut la plus sûre.

Les assistants IA peuvent reformuler un mot inconnu else if Expliquez la chaîne en langage clair, suggérez les valeurs d'entrée correspondant à chaque branche et signalez une condition impossible. Testez toujours le code vous-même, car cette explication n'est qu'une suggestion et non une preuve.

Souvent oui. Copilote GitHub Complète le code de branchement à partir d'un commentaire ou d'une condition partielle. Vérifiez les valeurs limites qu'il choisit, car une valeur générée > là où vous en aviez besoin >= est facile à manquer.

Il n'y a pas de limite de langue. Toute instruction peut apparaître à l'intérieur d'une branche, y compris une instruction supplémentaire. ifAu-delà de deux niveaux, la logique devient difficile à suivre ; il faut donc combiner les tests avec && ou rentrez plus tôt.

Non. Sans accolades, la branche ne contient que l'instruction suivante, ce qui explique le bon fonctionnement des exemples ci-dessus. L'ajout d'accolades reste toutefois recommandé, car une seconde ligne ajoutée ultérieurement se retrouve silencieusement en dehors de la branche.

&& n'est vrai que lorsque les deux parties sont sincères, et || Cela est vrai lorsque l'un ou l'autre côté l'est. Les deux sont en court-circuit : le membre de droite n'est jamais évalué une fois le résultat déjà déterminé.

getHours() renvoie l'heure actuelle de l'horloge du visiteur sous forme d'un nombre compris entre 0 et 23, de sorte que la comparaison avec 12 divise la journée en matin et après-midi sans aucun traitement supplémentaire.

Non. JavaLe script utilise deux mots-clés distincts, else if, avec un espace entre eux. Le mot unique elseif appartient à PHP et à certains langages de modèles et génère une erreur de syntaxe dans le navigateur.

Résumez cet article avec :