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

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

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

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;

¹ 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.

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.

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:

• Priorité des opérateurs avec l'opérateur Javascript ternaire
• Wikipédia

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;
}

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

est équivalent à

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

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

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

On l'appelle l'opérateur ternaire

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

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.

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 :)

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 :

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";

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'

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

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>

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.

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

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

 (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>"