Conseil rapide: comment utiliser l'opérateur ternaire en javascript

Ce tutoriel explorera en profondeur la syntaxe et l'utilisation commune des opérateurs ternaires JavaScript.

L'opérateur ternaire JavaScript (également appelé opérateur conditionnel) est utilisé pour effectuer des instructions en ligne, au lieu des instructions if...else. Il rend le code plus concis et plus facile à lire, et peut attribuer des valeurs aux variables ou exécuter des expressions en fonction des conditions.

Points clés

• L'opérateur ternaire JavaScript permet la vérification conditionnelle en ligne, ce qui rend le code plus court et plus facile à lire. Il accepte trois opérandes: une condition à tester et deux expressions séparées par des colons. Si la condition est vraie, la première expression est exécutée; si la condition est fausse, la deuxième expression est exécutée.
• L'opérateur ternaire peut être utilisé pour attribuer des valeurs, exécuter des expressions en fonction des conditions et vérifier si la variable est nulle ou non définie. Il peut également gérer plusieurs conditions dans l'expression de l'opérateur par des conditions de nidification ou de liaison, similaires à l'instruction if…else if…else.
• Bien que l'opérateur ternaire puisse améliorer la lisibilité du code en remplaçant la longue instruction if…else, l'utilisation excessive des opérateurs ternaires imbriqués peut rendre le code difficile à lire. Il convient également de noter que l'opérateur ternaire nécessite une vraie et fausse branches.

grammaire

L'opérateur ternaire accepte trois opérandes; Vous fournissez une condition à tester, suivie d'un point d'interrogation, suivie de deux expressions séparées par des colons. Si la condition est considérée comme une vraie valeur, la première expression est exécutée; si la condition est considérée comme une fausse valeur, l'expression finale est exécutée.

Le format de son utilisation est le suivant:

<code class="language-javascript">condition ? expr1 : expr2</code>

où condition sont les conditions à tester. Si sa valeur est vraie, alors expr1 est exécuté. Sinon, si sa valeur est une fausse valeur, alors expr2 est exécuté.

expr1 et expr2 peut être n'importe quel type d'expression. Ils peuvent être des variables, des appels de fonction ou même d'autres conditions.

Exemple:

<code class="language-javascript">1 > 2 ? console.log("You are right") : console.log('You are wrong');</code>

Utilisez l'opérateur ternaire pour l'attribution de valeur

L'un des cas d'utilisation les plus courants pour les opérateurs ternaires est de déterminer la valeur pour attribuer une valeur à une variable. La valeur d'une variable dépend généralement de la valeur d'une autre variable ou condition.

Bien que cela puisse être réalisé en utilisant l'instruction if...else, cela rendra le code plus long et plus difficile à lire. Par exemple:

<code class="language-javascript">const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"</code>

Dans cet exemple de code, définissez d'abord la variable message. Ensuite, utilisez l'instruction if...else pour déterminer la valeur de la variable.

Cela peut être fait simplement en une seule ligne à l'aide de l'opérateur ternaire:

<code class="language-javascript">const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"</code>

Exécuter l'expression à l'aide d'opérateurs ternaires

L'opérateur ternaire peut être utilisé pour exécuter tout type d'expression.

Par exemple, si vous souhaitez déterminer la fonction à exécuter en fonction de la valeur d'une variable, vous pouvez le faire en utilisant la déclaration if...else:

<code class="language-javascript">if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}</code>

Cela peut être fait en une seule ligne à l'aide de l'opérateur ternaire:

<code class="language-javascript">condition ? expr1 : expr2</code>

Si la valeur de feedback est "oui", la fonction sayThankYou sera appelée et exécutée. Sinon, la fonction saySorry sera appelée et exécutée.

Utilisez l'opérateur ternaire pour la vérification de la valeur nul

Dans de nombreux cas, vous pouvez travailler sur des variables qui peuvent ou non avoir des valeurs définies, par exemple lorsque vous entrez un résultat de recherche d'un utilisateur ou lors de la récupération des données d'un serveur.

À l'aide de l'opérateur ternaire, vous pouvez vérifier si la variable n'est pas nulle ou non définie en plaçant le nom de la variable dans l'opérande conditionnel.

Ceci est particulièrement utile lorsqu'une variable est un objet. Une erreur se produit si vous essayez d'accéder aux propriétés d'un objet qui est réellement nul ou indéfini. Vérifier d'abord si l'objet est défini peut vous aider à éviter les erreurs.

Exemple:

<code class="language-javascript">1 > 2 ? console.log("You are right") : console.log('You are wrong');</code>

Dans la première partie de ce bloc de code, book est un objet avec deux propriétés (name et author). Lorsque vous utilisez l'opérateur ternaire pour book, il vérifie s'il n'est pas nul ou non défini. Sinon - ce qui signifie qu'il a une valeur - alors accédez à la propriété name et enregistrez-la à la console. Sinon, s'il est nul, enregistrez «pas de livre» à la console à la place.

Puisque book n'est pas nul, le titre du livre sera enregistré dans la console. Cependant, dans la deuxième partie, lorsque la même condition est appliquée, la condition dans l'opérateur ternaire échouera car book est nul. Par conséquent, le "No Book" sera enregistré dans la console.

Conditions de nidification

Bien que l'opérateur ternaire soit utilisé pour en ligne, plusieurs conditions peuvent être utilisées dans le cadre de l'expression de l'opérateur ternaire. Vous pouvez nicher ou lier plusieurs conditions pour effectuer des vérifications de condition similaires aux instructions if...else if...else.

Par exemple, la valeur d'une variable peut dépendre de plusieurs conditions. Vous pouvez utiliser if...else if...else pour réaliser:

<code class="language-javascript">const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"</code>

Dans ce bloc de code, vous testez plusieurs conditions sur la variable score pour déterminer le niveau de lettre de la variable.

Les mêmes conditions peuvent être effectuées à l'aide de l'opérateur ternaire, comme indiqué ci-dessous:

<code class="language-javascript">const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"</code>

Évaluez d'abord la première condition, c'est-à-dire score >= 90.

Cela se poursuivra jusqu'à ce que toutes les conditions soient fausses, ce qui signifie que la valeur de grade est «F», ou jusqu'à ce que l'une des conditions soit évaluée comme vraie et que sa vraie valeur est attribuée à grade.

Conclusion

Comme le montre l'exemple de ce tutoriel, il existe de nombreux cas d'utilisation pour les opérateurs ternaires javascript. Dans de nombreux cas, les opérateurs ternaires peuvent améliorer la lisibilité du code en remplaçant les instructions Verbose if...else.

(le contenu ultérieur, tel que la partie FAQ, est recommandé pour le gérer séparément selon les besoins en raison de la durée de l'article.)

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!