Maison > Article > interface Web > Comment écrire une instruction IF en ligne en JavaScript ?

Comment écrire une instruction IF en ligne en JavaScript ?

WBOYavant: 2023-09-07 08:01:051145parcourir

如何在 JavaScript 中编写内联 IF 语句？

Les instructions conditionnelles sont les concepts les plus importants et les plus fondamentaux de tout langage de programmation. L'instruction if-else nous permet d'exécuter conditionnellement n'importe quel bloc de code. On peut définir la condition de l'instruction if entre accolades. Si la condition est vraie, le code du bloc if est exécuté sinon, il exécute le code du bloc else ;

Ici, nous montrons comment fonctionnent les instructions if-else en JavaScript.

if (condition) {
   
   // code to execute when the condition becomes true
} else {
   
   // code to execute when the condition becomes false
}

À partir du code ci-dessus, les utilisateurs peuvent comprendre la syntaxe de l'instruction if-else.

Et si je disais que vous pouvez écrire les cinq lignes de code ci-dessus sur une seule ligne ? Oui, vous pouvez le faire en utilisant une instruction if en ligne.

Grammaire

Les utilisateurs peuvent utiliser des instructions if en ligne en JavaScript selon la syntaxe suivante.

Condition? code - block - 1 : code - block - 2

Dans la syntaxe ci-dessus, la condition est une expression. Lorsque l'expression conditionnelle est vraie, le bloc de code 1 est exécuté ; sinon, il exécute le bloc de code 2.

Si nous comparons l'instruction if en ligne avec l'instruction if-else, alors code-block-1 est le code de l'instruction if et code-block-2 est le code de l'instruction else.

Exemple

Dans l'exemple suivant, nous apprendrons l'utilisation de base de l'instruction if en ligne. Nous avons utilisé la condition "10===10", si la condition est vraie, elle affichera "10 n'est pas égal à 10" sinon, elle affichera "10 n'est pas égal à 10".

Dans la sortie, l'utilisateur peut observer qu'il imprime "10 est égal à 10" puisque la condition est toujours évaluée comme vraie.

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let result = 10 === 10 ? "10 is equal to 10." : "10 is not equal to 10.";
      output.innerHTML += "The value of the result variable: " + result;
   </script>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous avons créé un tableau de nombres. De plus, nous avons créé des fonctions func1() et func2() qui impriment différents messages en utilisant les valeurs passées en paramètres.

Nous utilisons la méthode forEach() pour parcourir le tableau. Dans la fonction de rappel de la méthode forEach(), on vérifie si le nombre est divisible par 10, puis on appelle la fonction func1() sinon, on appelle la fonction func2() ;

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function func1(value) { 
         output.innerHTML += "The func1() is executed for the value " + value + "<br>";
      }
      function func2(value) {
         output.innerHTML += "The func2() is executed for the value " + value + "<br>";
      }
      let numbers = [10, 30, 43, 50, 64, 76, 87];
      numbers.forEach((num) => {
         num % 10 == 0 ? func1(num) : func2(num);
      })
   </script>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous utilisons l'instruction if-else et l'instruction if en ligne pour vérifier si l'année est une année bissextile. La fonction checkYear() utilise une instruction if-else pour garantir que l'année passée en argument est une année bissextile.

Dans la fonction checkInlineYear(), nous implémentons la même logique que dans la fonction checkYear(), mais nous convertissons les instructions if-else en instructions if en ligne. L'utilisateur peut voir comment nous avons écrit neuf lignes sur une seule ligne.

Les utilisateurs peuvent constater que les deux fonctions donnent le même résultat pour n’importe quelle valeur d’année.

<html>
<body>
   <h3>Using inline if statement to check whether year is leap year in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function checkYear(year) {
         
         // if the year is divisible by 400, it is a leap year.
         if (year % 400 == 0) {
            return true;
            
            // if the year is divisible by 400 and by 100, it is not a leap year.
         } else if (year % 100 == 0) {
            return false;
            
            // if the year is divisible by 400, not divisible by 100, and divisible by 4, it is a leap year.
         } else if (year % 4 == 0) {
            return true;
         } else {
            return false;
         }
      }
      function checkInlineYear(year) {
         return year % 400 == 0 ? true : year % 100 == 0 ? false : year % 4 == 0 ? true : false;
      }
      output.innerHTML += "Outputs using the checkYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkYear(3000) + "<br>";
      output.innerHTML += "<br>";
      output.innerHTML += "Outputs using the checkInlineYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkInlineYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkInlineYear(3000) + "<br>";
   </script>
</body>
</html>

L'utilisateur a appris à utiliser les instructions if en ligne en JavaScript. Nous pouvons observer que les instructions if en ligne rendent le code plus propre et plus lisible et il est toujours bon d'écrire moins de lignes de code avec la même logique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Expliquer les différents états de préparation des requêtes en AJAXArticle suivant：Expliquer les différents états de préparation des requêtes en AJAX

Articles Liés

Voir plus