JavaScript Opérateurs ternaires


Exemple

Peut être utilisé pour raccourcir les opérations if / else. Cela s'avère pratique pour renvoyer rapidement une valeur (c.-à-d. Pour l'attribuer à une autre variable).

Par exemple:

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

Dans ce cas, le result obtient la valeur «mignon», car la valeur de l'animal est «minou». Si animal avait une autre valeur, le résultat aurait la valeur «encore agréable».

Comparez cela à ce que le code aimerait avec les if/else .

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

Les if ou else peuvent avoir plusieurs opérations. Dans ce cas, l'opérateur retourne le résultat de la dernière expression.

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

Comme a est égal à 0, il devient 1 et str devient «pas un test». L'opération qui impliquait str était la dernière, donc b reçoit le résultat de l'opération, qui est la valeur contenue dans str , c'est-à-dire "pas un test".

Les opérateurs ternaires attendent toujours d' autres conditions, sinon vous obtiendrez une erreur de syntaxe. En guise de solution de contournement, vous pouvez retourner un zéro dans la branche else - peu importe si vous n'utilisez pas la valeur de retour, mais simplement en raccourcissant (ou en essayant de raccourcir) l'opération.

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

Comme vous voyez, if (a === 1) alert('Hey, it is 1!'); ferait la même chose Ce ne serait qu'un char plus long, car il n'a pas besoin d'une else condition obligatoire. Si une else condition était impliquée, la méthode ternaire serait beaucoup plus propre.

a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');

Les ternaires peuvent être imbriqués pour encapsuler une logique supplémentaire. Par exemple

foo ? bar ? 1 : 2 : 3

// To be clear, this is evaluated left to right 
// and can be more explicitly expressed as:

foo ? (bar ? 1 : 2) : 3

C'est la même chose que if/else

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

Du point de vue stylistique, ceci ne devrait être utilisé qu'avec des noms de variables courts, car les ternaires multi-lignes peuvent réduire considérablement la lisibilité.

Les seules instructions qui ne peuvent pas être utilisées dans les ternaires sont les instructions de contrôle. Par exemple, vous ne pouvez pas utiliser return ou break avec des ternaires. L'expression suivante sera invalide.

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

Pour les instructions de retour, les éléments suivants seraient également non valides:

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

Pour effectuer correctement les opérations ci-dessus, vous devez renvoyer le ternaire comme suit:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';