L'opérateur (ternaire) conditionnel est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de Instructions/if...else
.
Syntaxe
condition ? expr1 : expr2
Paramètres
condition
- Une expression qui est évaluée en un booléen (
true
oufalse
).
expr1
,expr2
- Des expressions dont la valeur peut être de n'importe quel type.
Description
SI condition
vaut true
, l'opérateur renverra la valeur d'expr1;
dans le cas contraire, il renverra la valeur de expr2
. Par exemple, on peut afficher un message différent en fonction d'une variable estMembre
avec cette déclaration :
"Le prix est : " + (estMembre ? "15 €" : "30 €")
On peut également affecter des variables dont la valeur dépendra du test :
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :
var premierControle = false, secondControle = false, acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé"; console.log(acces); // "Accès autorisé"
Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :
var stop = false, age = 16; age > 18 ? location.assign("continue.html") : stop = true;
en utilisant l'opérateur virgule
, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un if...else
n'est pas plus approprié).
var stop = false, age = 23; age > 18 ? ( console.log("OK, accès autorisé."), location.assign("continue.html") ) : ( stop = true, console.log("Accès refusé !") );
De la même façon, on peut effectuer plusieurs opérations avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera la dernière valeur qui sera affectée. Ici aussi, attention à la lisibilité du code relativement à un if...else
.
var age = 16; var url = age > 18 ? ( console.log("Accès autorisé."), // console.log renvoie "undefined", mais cela importe peu car // ce n'est pas le dernier élément de l'expression "continue.html" // la valeur à affecter si âge > 18 ) : ( console.log("Accès refusé !"), // etc. "stop.html" // la valeur à affecter si âge <= 18 ); location.assign(url); // "stop.html"
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
ECMAScript 2016 Draft (7th Edition, ECMA-262) La définition de 'Conditional Operator' dans cette spécification. |
Projet | |
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'Conditional Operator' dans cette spécification. |
Standard | |
ECMAScript 5.1 (ECMA-262) La définition de 'The conditional operator' dans cette spécification. |
Standard | |
ECMAScript 1st Edition (ECMA-262) La définition de 'The conditional operator' dans cette spécification. |
Standard | Définition initiale, implémentée avec JavaScript 1.0. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Fonctionnalité | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Voir aussi
- L'instruction
if...else