Êtes-vous fatigué de vous répéter pendant le codage? Utilisez-vous toujours les blocs traditionnels « sielseautre »? Et si je te disais que tu pourrais écrire 15 lignes de code en 4 lignes ? Appelez le 1-800-OPÉRATEURS TERNAIRES maintenant.
Les opérateurs ternaires sont la version abrégée des instructions ifelseelse. C’est le seul opérateur conditionnel en JavaScript qui prend trois opérandes.
La syntaxe de base pour les opérateurs ternaires est
condition ? expression1 : expression2
- lorsque la condition est la valeur à tester / évaluer,
- expression1 peut être une valeur de tout type à exécuter si la condition est vraie
- expression2 peut être une valeur de tout type à exécuter si expression1 est faux, c’est-à-dire une valeur de repli communément appelée ‘else’
- « ? » signifie » si « , et » : » signifie » autre »
Regardons un exemple
Si nous devions déterminer si l’on est autorisé à conduire selon son âge, en utilisant les instructions ifelseelse — cela ressemble à ceci
var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"
En utilisant des opérateurs ternaires, le même code ressemblera à ceci
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Ce bloc de code se traduira par SI la variable « âge » est supérieure ou égale à 16 ans, le navigateur devrait alerter « Vous êtes autorisé à conduire! », SINON » Vous devriez avoir 16 ans pour conduire! »devrait être alerté!
Une autre raison d’adopter ternary, c’est sa flexibilité et sa taille miniature qui pourraient s’adapter n’importe où dans votre code. Par exemple, si vous souhaitez attacher le résultat de votre chaîne directement à une chaîne, vous pouvez facilement le faire sans avoir à déclarer votre condition séparément.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
SI isMember est vrai, « Les frais sont de 2,00 $ », SINON « Les frais sont de 10,00 $ ».
Devinez quoi?! Vous pouvez également affecter les résultats des opérations ternaires à des variables. Utilisons le même exemple de conduite que nous avons utilisé plus tôt.
var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"
Dans cet exemple, nous avons enregistré le résultat dans une variable et l’avons ensuite affiché dans la console.
Il y a autant de possibilités dans les opérateurs ternaires que dans le bloc traditionnel ifelseelse. Plusieurs opérateurs ternaires peuvent être enchaînés ensemble pour former ce que nous appelons le bloc « IFELSEELSE IFELSEELSE ».
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
Le bloc de code ci-dessus se traduira si l’année est inférieure à 2018, le navigateur devrait alerter « Trop tôt », ou bien, si l’année est supérieure à 2018, « Trop tard » sera affiché, sinon s’il n’est pas supérieur ou inférieur à c’est-à-dire égal à, alors « Exactement » sera affiché.
Vous pouvez également avoir des instructions if imbriquées:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
Nos yeux scannent les codes verticalement, dont l’indentation et les espaces jouent un grand rôle pour nous aider à lire les codes facilement. Ils ne sont pas exclus en ternaire, et les espaces libres n’affectent pas votre code.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
Le code ci-dessus fonctionnera aussi bien que toute évaluation ternaire ou toute opération ifelseelse.
Il est également possible d’avoir plusieurs opérations par cas, et de les séparer par une virgule.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);
Vous pouvez également effectuer plusieurs opérations et affecter les valeurs à une variable. La dernière valeur séparée par des virgules sera affectée à la variable.
var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'),
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"
Enfin, les opérations ternaires peuvent être utilisées pour renvoyer des valeurs dans les fonctions. Par exemple, si nous devions écrire une fonction pour renvoyer une valeur pour déterminer si Chris Pratt est un membre de l’univers Marvel ou non;
var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Notez que nous avons utilisé return plusieurs fois et avons dû écrire l’instruction ifelseelse et intégrer leurs valeurs entre crochets, etc., ce qui est génial. Mais il peut être raccourci en utilisant des opérateurs ternaires. Le même code ci-dessus sera évalué comme tel en opération ternaire;
var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Remarque : Toutes les variables utilisées dans une opération ternaire doivent être définies avant la création de l’opération.
Si vous êtes arrivé aussi loin, merci!
N’hésitez pas à m’ajouter sur Twitter et sur Instagram