web-dev-qa-db-fra.com

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

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

javascriptternary-operator
327
muudless

Ceci est un raccourci d'une ligne pour une déclaration if-else. C'est ce qu'on appelle l'opérateur conditionnel.1

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

if(userIsYoungerThan21) {
  serveGrapeJuice();
}
else {
  serveWine();
}

Cela peut être raccourci avec le ?: comme ceci:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

En Javascript, l'opérateur conditionnel peut évaluer une expression, pas seulement une déclaration:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";
serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

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

userIsYoungerThan4 ? serveMilk() : userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Soyez prudent, cependant, sinon vous obtiendrez un code compliqué 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 c'est juste un opérateur {a _ [un opérateur acceptant trois opérandes]. C'est le seul que JavaScript a actuellement, cependant.

506
Peter Olson

Je veux ajouter un peu aux réponses données.

Si vous rencontrez (ou souhaitez utiliser) un ternaire dans une situation telle que "afficher une variable si elle est définie, sinon ...", vous pouvez le rendre encore plus court, sans ternaire .

Au lieu de:

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

Vous pouvez utiliser:

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

Ceci est l'équivalent de Javascripts de l'opérateur ternaire abrégé 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. 

100
Jeffrey Roosendaal

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

Exemple

L’opérateur?: Peut être utilisé comme un raccourci pour une déclaration if ... else . Il est généralement utilisé dans le cadre d'un expression plus grande où if ... else déclaration serait maladroite. Pour 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 en utilisant une déclaration if ... else ressemblerait à suit:

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

De Documentation MSDN JS .

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

Regarde aussi: 

24
Michael Robinson

Il est un peu difficile de rechercher sur Google lorsque vous n'avez que des symboles;) Les termes à utiliser sont "opérateur conditionnel javascript".

Si vous voyez d'autres symboles amusants en Javascript, vous devriez d'abord rechercher les opérateurs de Javascript: liste des opérateurs de MDC . La seule exception que vous êtes susceptible de rencontrer 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;
}
18
David Tang
z = (x == y ? 1 : 2);

est équivalent à

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

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

8
Ernest Friedman-Hill

Opérateur ternaire

Nous avons couramment 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 affecter une variable . Javascript possède une solution à ce problème Opérateur Ternary . L'opérateur Ternary peut écrire sur une ligne et affecter une variable.

Exemple:

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

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

6
Simplans

C'est ce qu'on appelle l'opérateur ternaire

tmp = (foo==1 ? true : false);
5
eagle12

Hey mate, rappelez-vous 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 true ou false.

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

sinon (:) vous obtiendrez "putain";

J'espère que ça aide un ami :) 

3
Guy Keren
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";
2
Gajendra D Ambi

C'est un if statement sur une seule ligne.

Alors 

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

L'expression à évaluer est dans le ( )

Si cela correspond à true, exécutez le code après le ?

Si elle correspond à false, exécutez le code après le :

2
Jason Gennaro

La plupart des réponses sont correctes mais je veux ajouter un peu plus. L'opérateur ternary est à droite associative, ce qui signifie qu'il peut être chained 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 est ici

2
Arif

C'est ce qu'on appelle le ternary operator. Pour plus d’informations, voici une autre question à laquelle j’ai répondu:

Comment écrire une instruction IF else sans 'else'

1
Travis Webb

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 de famille - elle peut être null . 

        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 le 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>

1
Ajay2707

Ce n'est probablement pas la manière la plus élégante de le faire. 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 repliements sur une ligne plutôt que des 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

0
Joakim Sandqvist

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

condition ? expressionIfTrue : expressionIfFalse

Pensez à expressionIfTrue comme OG si la déclaration est vraie;
pense que expressionIfFalse est 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) renvoyé si vrai, le second retour après les deux points: renvoyait y = (valeur) si faux.

0
PBrook

L'opérateur conditionnel (ternaire) est le seul opérateur JavaScript cela prend trois opérandes. Cet opérateur est fréquemment utilisé en tant que raccourci pour l'instruction if.

condition ? expr1 : expr2

Si la condition est vraie, l'opérateur renvoie la valeur de expr1; sinon, il retourne 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 Lien vers le document MDN

0
Srikrushna Pal