¿Cómo usas el? : operador (condicional) en JavaScript?

¿Puede alguien explicarme en palabras simples qué es el ?:operador (condicional, "ternario") y cómo usarlo?

Esta es una abreviatura de una línea para una instrucción if-else. Se llama el operador condicional. ¹

Aquí hay un ejemplo de código que podría acortarse con el operador condicional:

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

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

Esto se puede acortar de la siguiente ?:manera:

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

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

Como todas las expresiones, el operador condicional también se puede usar como una declaración independiente con efectos secundarios, aunque esto es inusual fuera de la minificación:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Incluso pueden ser encadenados:

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

Sin embargo, tenga cuidado, o terminará con un código complicado como este:

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

¹ A menudo llamado "el operador ternario", pero de hecho es solo un operador ternario [un operador que acepta tres operandos]. Sin embargo, es el único JavaScript que tiene actualmente.

Quiero agregar algunas a las respuestas dadas.

En caso de que encuentre (o quiera usar) un ternario en una situación como 'mostrar una variable si está configurada, de lo contrario ...', puede hacerlo aún más corto, sin un ternario .

En vez de:

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

Puedes usar:

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

Esto es equivalente a Javascripts del operador ternario abreviado de PHP ?:

O incluso:

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

Evalúa la variable y, si es falsa o no establecida, pasa a la siguiente.

Se llama el operador 'ternario' o 'condicional'.

Ejemplo

El operador?: Se puede utilizar como acceso directo para una instrucción if ... else. Por lo general, se usa como parte de una expresión más grande donde una declaración if ... else sería incómoda. Por ejemplo:

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

El ejemplo crea una cadena que contiene "Buenas tardes". si es después de las 6pm. El código equivalente que usa una instrucción if ... else sería el siguiente:

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

De la documentación de MSDN JS .

Básicamente es una declaración condicional abreviada.

Ver también:

• Precedencia del operador con el operador Javascript Ternary
• Wikipedia

Es un poco difícil de google cuando todo lo que tiene son símbolos;) Los términos a utilizar son "operador condicional de JavaScript".

Si ve más símbolos divertidos en Javascript, primero intente buscar los operadores de Javascript: la lista de operadores de MDC . La única excepción que probablemente encuentres es el $símbolo .

Para responder a su pregunta, los operadores condicionales reemplazan las declaraciones if simples. Un ejemplo es el mejor:

var insurancePremium = age > 21 ? 100 : 200;

En vez de:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}

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

es equivalente a

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

excepto, por supuesto, es más corto.

La mayoría de las respuestas son correctas, pero quiero agregar un poco más. El operador ternario es asociativo a la derecha, lo que significa que se puede encadenar de la siguiente manera if … else-if … else-if … else:

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

Equivalente a:

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

Más detalles está aquí

Se llama operador ternario.

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

Operador ternario

Comúnmente tenemos declaraciones condicionales en Javascript.

Ejemplo:

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

pero contiene dos o más líneas y no se puede asignar a una variable. Javascript tiene una solución para este problema Operador ternario . El operador ternario puede escribir en una línea y asignar a una variable.

Ejemplo:

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

Este operador ternario es similar en lenguaje de programación C.

Hola amigo, solo recuerda que js funciona evaluando si es verdadero o falso, ¿verdad?

tomemos un operador ternario:

questionAnswered ? "Awesome!" : "damn" ;

Primero, js comprueba si questionAnsresponde es trueo false.

if true( ?) obtendrás "Awesome!"

else ( :) obtendrás "maldición";

Espero que esto ayude amigo :)

Es if statementtodo en una línea.

Entonces

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

La expresión a evaluar está en el ( )

Si coincide con verdadero, ejecute el código después de ?

Si coincide con falso, ejecute el código después de :

x = 9
y = 8

unario

++x
--x

Binario

z = x + y

Ternario

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";

Se llama el ternary operator. Para obtener más información, aquí hay otra pregunta que respondí con respecto a esto:

Cómo escribir una declaración IF else sin 'else'

Probablemente esta no sea exactamente la forma más elegante de hacer esto. Pero para alguien que no está familiarizado con los operadores ternarios, esto podría resultar útil. Mi preferencia personal es hacer retrocesos de 1 línea en lugar de bloqueos de condición.

  // 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);

Operador ternario

Podemos usar con Jquery, así como la longitud como el siguiente ejemplo:

Supongamos que tenemos el cuadro de texto GuarantorName que tiene valor y queremos obtener el nombre y el apellido; puede ser nulo. Tan 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];        
        }

Podemos usar el siguiente código con Jquery con un código mínimo

    

    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>

Las expresiones ternarias son muy útiles en JS, especialmente React. Aquí hay una respuesta simplificada a los muchos buenos y detallados que se proporcionan.

condition ? expressionIfTrue : expressionIfFalse

Piense expressionIfTruecomo el OG si la declaración se vuelve verdadera;
piense expressionIfFalsecomo la declaración else.

Ejemplo:

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

esto verificó el valor de x, el primer y = (valor) devuelto si es verdadero, el segundo retorno después de los dos puntos: devolvió y = (valor) si es falso.

El operador condicional (ternario) es el único operador de JavaScript que toma tres operandos. Este operador se usa con frecuencia como acceso directo para la instrucción if.

condition ? expr1 : expr2 

Si la condición es verdadera, el operador devuelve el valor de expr1; de lo contrario, devuelve el valor 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));

Para obtener más aclaraciones, lea el enlace del documento MDN

Si tiene una condición, verifique la función de instancia en javascript . Es fácil de usar operador ternario . que solo necesitará una sola línea para implementar. Ex:

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

Una función como esta con una condición se puede escribir de la siguiente manera.

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

condición? si es verdadero: si es falso

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