Comment utilisez-vous le? : opérateur (conditionnel) en JavaScript?

434

Quelqu'un peut-il m'expliquer en termes simples ce qu'est l' ?:opérateur (conditionnel, "ternaire") et comment l'utiliser?

muudless
la source
2
Ce sont des opérateurs. Les opérandes sont les valeurs avec lesquelles vous utilisez ces opérateurs.
BoltClock
7
Fait amusant: certaines langues (à savoir Groovy ) ont en fait un opérande ?:(comme vous l'avez écrit, sans déclaration entre) - l' opérateur Elvis . Assez intelligent.
Rob Hruska
copie possible de javascript si alternative
Rob Hruska
3
Googler les symboles peut être problématique, mais que diriez-vous de googler les "opérateurs Javascript" (et de les apprendre tous)?
nnnnnn
vérifier cette entrée wiki en.wikipedia.org/wiki/Elvis_operator
Nerdroid

Réponses:

645

Il s'agit d'un raccourci d'une ligne pour une instruction if-else. Cela s'appelle l'opérateur conditionnel. 1

Voici un exemple de code qui pourrait être raccourci avec l'opérateur conditionnel:

var userType;
if (userIsYoungerThan18) {
  userType = "Minor";
} else {
  userType = "Adult";
}

if (userIsYoungerThan21) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

Cela peut être raccourci de la ?:manière suivante:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

Comme toutes les expressions, l'opérateur conditionnel peut également être utilisé comme une instruction autonome avec des effets secondaires, bien que cela soit inhabituel en dehors de la minification:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Ils peuvent même être enchaînés:

serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');

Soyez prudent, cependant, ou vous vous retrouverez avec du code alambiqué comme ceci:

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;

1 Souvent appelé "l'opérateur ternaire", mais en fait il s'agit simplement d' un opérateur ternaire [un opérateur acceptant trois opérandes]. C'est le seul JavaScript actuellement, cependant.

Peter Olson
la source
56
Juste pour clarifier le nom: ternaryc'est le type d'opérateur (c'est-à-dire qu'il a 3 parties). Le nom de cet opérateur ternaire spécifique est le conditional operator. Il se trouve qu'il n'y a qu'un seul opérateur ternaire dans JS, donc les termes sont mal utilisés.
Fin du codage
1
La forme ternaire @tryingToGetProgrammingStraight est techniquement une expression, et les expressions peuvent contenir d'autres expressions pour former des arbres d'expression. ce code là est à quoi ressemble une arborescence d'expression :) voir: fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup
1
Je recommande fortement de mettre à jour l'exemple du cas d'utilisation courante, et non un cas d'utilisation d'effets secondaires fréquemment cité comme un abus de l'opérateur.
TJ Crowder du
7
Je ne sais pas pourquoi il y a un petit texte de grammaire en bas, mais c'est incorrect. Si javascript n'a qu'un seul type d'opérateur, alors il est tout à fait correct de dire L'opérateur ternaire et non Un opérateur ternaire ... Dire "cet opérateur ternaire est Un opérateur ternaire en javascript (et c'est le seul)" est idiot, utilisez simplement LE et cela implique tout cela.
Andrew
1
@MarkCarpenterJr En JavaScript, la façon typique de le faire est avec l' ||opérateur, car il court-circuite si la valeur de gauche est vraie.
Peter Olson
142

Je veux en ajouter aux réponses données.

Si vous rencontrez (ou souhaitez utiliser) un ternaire dans une situation comme «afficher une variable si elle est définie, sinon ...», vous pouvez la rendre encore plus courte, sans ternaire .


Au lieu de:

var welcomeMessage  = 'Hello ' + (username ? username : 'guest');

Vous pouvez utiliser:

var welcomeMessage  = 'Hello ' + (username || 'guest');

Il s'agit de Javascripts équivalents à l'opérateur ternaire raccourci de PHP ?:

Ou même:

var welcomeMessage  = 'Hello ' + (username || something || maybethis || 'guest');

Il évalue la variable, et si elle est fausse ou non définie, elle passe à la suivante.

Jeffrey Roosendaal
la source
4
Je luttais contre le ternaire et j'ai finalement trouvé cette réponse. Je vous remercie!
Ljubisa Livac
Si je ne devais pas utiliser les accolades autour de l'opérateur ternaire 'Hello ' + (username ? username : 'guest'), Hello + s'il est ignoré et que le résultat de l'opération ternaire est retourné. Quelqu'un peut-il expliquer pourquoi?
Shiva
2
@Shiva Sans les crochets, il évalue toute la partie gauche :, ce 'Hello ' + usernamequi est toujours true, car c'est une chaîne d'une longueur supérieure à 0.
Jeffrey Roosendaal
26

C'est ce qu'on appelle l'opérateur «ternaire» ou «conditionnel».

Exemple

L'opérateur?: Peut être utilisé comme raccourci pour une instruction if ... else. Il est généralement utilisé dans le cadre d'une expression plus large où une instruction if ... else serait maladroite. Par exemple:

var now = new Date();
var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");

L'exemple crée une chaîne contenant «Bonsoir». si c'est après 18h. Le code équivalent utilisant une instruction if ... else se présenterait comme suit:

var now = new Date();
var greeting = "Good";
if (now.getHours() > 17)
   greeting += " evening.";
else
   greeting += " day.";

À partir de la documentation MSDN JS .

Fondamentalement, c'est une déclaration conditionnelle abrégée.

Regarde aussi:

Michael Robinson
la source
5
Il s'agit en fait de l'opérateur conditionnel.
ChaosPandion
5
C'est un opérateur conditionnel ternaire
Petah
4
@Michael - Veuillez consulter la section 11.12 Opérateur conditionnel (? :) De
ChaosPandion
7
Les gens se disputent -ils toujours sur ces trucs? Décidément.
BoltClock
7
@BoltClock - Pas exactement argument, essayant simplement de normaliser notre vocabulaire essentiel.
ChaosPandion
21

C'est un peu difficile de google quand vous n'avez que des symboles;) Les termes à utiliser sont "opérateur conditionnel javascript".

Si vous voyez d'autres symboles amusants dans Javascript, vous devriez d'abord chercher les opérateurs de Javascript: la liste des opérateurs de MDC . La seule exception que vous rencontrerez probablement est le $symbole .

Pour répondre à votre question, les opérateurs conditionnels remplacent les instructions if simples. Un exemple est le meilleur:

var insurancePremium = age > 21 ? 100 : 200;

Au lieu de:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}
David Tang
la source
Bonne explication, mais l'exemple est mauvais car il attribue une valeur booléenne en fonction du résultat d'une expression booléenne, ce qui n'a pas beaucoup de sens. Vous préférez utiliser à la var olderThan20 = age > 20;place.
BalusC
@BalusC - oui :) Je l'ai réalisé, mais les exemples sont difficiles à retirer de mon chapeau! Pensera à un meilleur ...
David Tang
9
z = (x == y ? 1 : 2);

est équivalent à

if (x == y)
    z = 1;
else
    z = 2;

sauf que, bien sûr, c'est plus court.

Ernest Friedman-Hill
la source
7

La plupart des réponses sont correctes, mais je veux en ajouter un peu plus. L' opérateur ternaire est associatif à droite, ce qui signifie qu'il peut être enchaîné de la manière suivante if … else-if … else-if … else:

function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

Équivalent à:

function example() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

Plus de détails ici

Arif
la source
1
C'est ce que je recherche.
Sazal Das
6

On l'appelle l'opérateur ternaire

tmp = (foo==1 ? true : false);
eagle12
la source
6
Il est appelé l'opérateur conditionnel. Il se trouve que c'est le seul exemple d' un opérateur ternaire dans la langue.
Courses de légèreté en orbite
tmp = foo == 1 fait la même chose donc ce serait suffisant
Robert Varga
6

Opérateur ternaire

Généralement, nous avons des instructions conditionnelles en Javascript.

Exemple:

if (true) {
    console.log(1)
} 
else {
    console.log(0)
}
# Answer
# 1

mais il contient deux lignes ou plus et ne peut pas être affecté à une variable. Javascript a une solution pour ce problème d' opérateur ternaire . L'opérateur ternaire peut écrire sur une ligne et attribuer à une variable.

Exemple:

var operator = true ? 1 : 0
console.log(operator)
# Answer
# 1

Cet opérateur ternaire est similaire dans le langage de programmation C.

Simplans
la source
5

Hé mec, souviens-toi juste que js fonctionne en évaluant soit vrai soit faux, non?

prenons un opérateur ternaire:

questionAnswered ? "Awesome!" : "damn" ;

Tout d'abord, js vérifie si questionAnswered est trueou false.

si true( ?) vous obtiendrez "Génial!"

else ( :) vous obtiendrez "putain";

J'espère que cela aide un ami :)

Guy Keren
la source
2

C'est un if statementtout sur une seule ligne.

Donc

var x=1;
(x == 1) ? y="true" : y="false";
alert(y);

L'expression à évaluer se trouve dans le ( )

S'il correspond à true, exécutez le code après le ?

S'il correspond à false, exécutez le code après le :

Jason Gennaro
la source
var x = 1; y = (x == 1)? vrai faux;
augurone
2
x = 9
y = 8

unaire

++x
--x

Binaire

z = x + y

Ternaire

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";
Gajendra D Ambi
la source
1

Cela s'appelle le ternary operator. Pour plus d'informations, voici une autre question à laquelle j'ai répondu à ce sujet:

Comment écrire une instruction IF else sans 'else'

Travis Webb
la source
4
En fait, ternaire est le type d'opérateur (c'est-à-dire qu'il comporte 3 parties). Le nom de cet opérateur ternaire spécifique est le conditional operator. Il se trouve qu'il n'y a qu'un seul opérateur ternaire dans JS, donc les termes sont mal utilisés.
Fin du codage du
1

Ce n'est probablement pas exactement la façon la plus élégante de procéder. Mais pour quelqu'un qui n'est pas familier avec les opérateurs ternaires, cela pourrait s'avérer utile. Ma préférence personnelle est de faire des remplacements à 1 ligne au lieu de blocs de condition.

  // var firstName = 'John'; // Undefined
  var lastName = 'Doe';

  // if lastName or firstName is undefined, false, null or empty => fallback to empty string
  lastName = lastName || '';
  firstName = firstName || '';

  var displayName = '';

  // if lastName (or firstName) is undefined, false, null or empty
  // displayName equals 'John' OR 'Doe'

  // if lastName and firstName are not empty
  // a space is inserted between the names
  displayName = (!lastName || !firstName) ? firstName + lastName : firstName + ' ' + lastName;


  // if display name is undefined, false, null or empty => fallback to 'Unnamed'
  displayName = displayName || 'Unnamed';

  console.log(displayName);

Opérateur ternaire

Joakim Sandqvist
la source
1

Nous pouvons utiliser avec Jquery ainsi que la longueur comme exemple ci-dessous:

Supposons que nous ayons la zone de texte GuarantorName qui a une valeur et que nous voulons obtenir le prénom et le nom - elle peut être nulle. Alors rathar que

        var gnamesplit = $("#txtGuarantorName").val().split(" ");
        var gLastName = "";
        var gFirstName = "";
        if(gnamesplit.length > 0 ){
           gLastName  = gnamesplit[0];        
        }
        if(gnamesplit.length > 1 ){
           gFirstName = gnamesplit[1];        
        }

Nous pouvons utiliser le code ci-dessous avec Jquery avec un code minimum

    

    var gnamesplit = $("#txtGuarantorName").val().split(" ");
    var gLastName = gnamesplit.length > 0  ? gnamesplit[0] : "";
    var gFirstName =  gnamesplit.length > 1  ? gnamesplit[1] : "";
    $("#txtLastName").val(gLastName);
    $("#txtFirstName").val(gFirstName);
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
  Guarantor Name: <input type="text" id="txtGuarantorName" value="ASP.NET Core"  /><br/>
  <br/>
  <br/>
  
  First Name: <input type="text" id="txtLastName" value="ASP.NET Core"  />
  Last Name: <input type="text" id="txtFirstName" value="ASP.NET Core"  />
</div>

Ajay2707
la source
1

Les expressions ternaires sont très utiles dans JS, en particulier React. Voici une réponse simplifiée aux nombreuses bonnes réponses détaillées fournies.

condition ? expressionIfTrue : expressionIfFalse

Considérez expressionIfTruecomme l'OG si la déclaration devient vraie;
penser expressionIfFalsecomme la déclaration else.

Exemple:

var x = 1;
(x == 1) ? y=x : y=z;

cela vérifiait la valeur de x, le premier y = (valeur) retourné si vrai, le deuxième retour après les deux points: retourné y = (valeur) si faux.

PBrook
la source
0

L'opérateur conditionnel (ternaire) est le seul opérateur JavaScript qui accepte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour l'instruction if.

condition ? expr1 : expr2 

Si la condition est vraie, l'opérateur renvoie la valeur de expr1; sinon, elle renvoie la valeur de expr2.

function fact(n) {
  if (n > 1) {
    return n * fact(n-1);
  } else {
    return 1;
  }
  // we can replace the above code in a single line of code as below
  //return (n != 1) ? n * fact(n - 1) : 1;
}
console.log(fact(5));

Pour plus de précisions, veuillez lire le lien vers le document MDN

Srikrushna
la source
0

Si vous avez une fonction de vérification de condition en javascript . c'est un opérateur ternaire facile à utiliser . qui n'aura besoin que d' une seule ligne pour être implémentée. Ex:

    private module : string ='';
    private page:boolean = false;
    async mounted(){
     if(this.module=== 'Main')
    {
    this.page = true;}
    else{
    this.page = false;
    }
}

une fonction comme celle-ci avec une condition peut être écrite comme suit.

this.page = this.module=== 'Main' ?true:false;

état ? si Vrai: si Faux

Sunali Bandara
la source
-3
 (sunday == 'True') ? sun="<span class='label label-success'>S</span>" : sun="<span class='label label-danger'>S</span>";

 sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
Chandrashekhar Komati
la source
vous pouvez aussi ajouter du html avec l'opérateur ternaire
Chandrashekhar Komati
ce n'est vraiment pas la façon dont vous devriez écrire l'affectation ternaire et aussi utiliser === pas == autrement, vous pourriez aussi bien le faire sunday ?. cela devrait êtresun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley
l'intérêt du ternaire conditionnel est de raccourcir les valeurs d'affectation conditionnelle, sinon vous devez simplement utiliser une instruction if
TheRealMrCrowley
maintenant dites-moi que celui-ci est correct ou non. si vous dites mal, alors cela fonctionne et j'utilise mon projet ..
Chandrashekhar Komati
Je sais que cela "fonctionne" comme vous l'avez dans le premier exemple, mais il en va de même pour ce que j'ai fourni que vous avez mis comme deuxième version. Remarquez combien il y a de duplication inutile dans la version supérieure par rapport à celle que je vous ai donnée. JS est un code qui est envoyé au navigateur, donc la longueur du code est importante
TheRealMrCrowley