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

457
muudless 7 jun. 2011 a las 06:10

17 respuestas

La mejor respuesta

1

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 con ?: así:

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

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

Al igual que 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();

Ellas incluso pueden ser encadenadas:

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;

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

622
CertainPerformance 8 ago. 2019 a las 12:57
x = 9
y = 8

Unario

++x
--x

Binaria

z = x + y

Ternaria

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";
2
Gajendra D Ambi 10 feb. 2018 a las 16:04

Se llama 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'

1
Community 23 may. 2017 a las 12:34

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

Operadora ternaria

1
Joakim Sandqvist 2 oct. 2018 a las 10:41

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 en expressionIfTrue como el OG si la declaración se hace verdadera;
piense en expressionIfFalse como 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.

1
Pang 22 ene. 2019 a las 03:08

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>
1
Ajay2707 17 oct. 2018 a las 12:33

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 puede ser encadenado 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 en aquí

6
Arif 16 ago. 2019 a las 02:55

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: Lista de MDC de operadores. La única excepción que probablemente encuentre 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 lugar de:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}
21
Community 23 may. 2017 a las 12:02

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 documentación de MSDN JS.

Básicamente es una declaración condicional abreviada.

Vea también:

26
Community 23 may. 2017 a las 11:47

Quiero agregar algunas de 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 lugar de:

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

Puede utilizar:

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

Este es el equivalente Javascript 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.

135
Jeffrey Roosendaal 30 oct. 2017 a las 13:15
 (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>"
-3
Chandrashekhar Komati 8 may. 2017 a las 07:35

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

Tomemos una operadora ternaria:

questionAnswered ? "Awesome!" : "damn" ;

Primero, js comprueba si questionAnsresponde es true o false.

Si true (?) obtendrá "¡Impresionante!"

De lo contrario (:) obtendrás "maldita";

Espero que esto ayude amiga :)

5
Guy Keren 24 may. 2017 a las 11:11
z = (x == y ? 1 : 2);

Es equivalente a

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

Excepto, por supuesto, es más corto.

9
Ernest Friedman-Hill 7 jun. 2011 a las 02:13

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 enlace del documento MDN

0
Srikrushna 28 jun. 2018 a las 11:54

Es un if statement todo en una línea.

Así que

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

La expresión a evaluar está en ( )

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

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

2
Jason Gennaro 7 jun. 2011 a las 02:18

Operadora ternaria

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.

6
Simplans 21 ago. 2016 a las 15:59

Se llama operador ternario.

tmp = (foo==1 ? true : false);
5
eagle12 7 jun. 2011 a las 02:13