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

434

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

mudo
fuente
2
Esos son los operadores. Los operandos son los valores con los que utiliza estos operadores.
BoltClock
77
Dato curioso: algunos idiomas (es decir, Groovy ) en realidad tienen un operando ?:(como lo ha escrito, sin ninguna declaración entre ellos): el operador de Elvis . Muy inteligente.
Rob Hruska
posible duplicado de javascript si es alternativo
Rob Hruska
3
Buscar símbolos en Google puede ser problemático, pero ¿qué hay de buscar en Google "operadores de Javascript" (y aprenderlos a todos)?
nnnnnn
revisa esta entrada wiki en.wikipedia.org/wiki/Elvis_operator
Nerdroid

Respuestas:

645

Esta es una abreviatura de una línea para una instrucción if-else. Se llama el operador condicional. 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 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;

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.

Peter Olson
fuente
56
Solo para aclarar el nombre: ternaryes el tipo de operador (es decir, tiene 3 partes). El nombre de ese operador ternario específico es conditional operator. Simplemente sucede que solo hay un operador ternario en JS, por lo que los términos se usan incorrectamente.
Gone Coding
1
La forma ternaria @tryingToGetProgrammingStraight es técnicamente una expresión, y las expresiones pueden contener otras expresiones para formar árboles de expresión. ese código es el aspecto de un árbol de expresión :) ver: fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup
1
Recomendamos encarecidamente actualizar el ejemplo para el caso de uso común, no un caso de uso de efectos secundarios frecuentemente citado como un abuso del operador.
TJ Crowder
77
No estoy seguro de por qué hay un pequeño resumen gramatical en la parte inferior, pero es incorrecto. Si javascript solo tiene 1 de un tipo de operador, entonces es definitivamente correcto decir EL operador ternario y no un operador ternario ... Decir "este operador ternario es un operador ternario en javascript (y es el único)" es tonto, solo usa THE e implica todo eso.
Andrew
1
@MarkCarpenterJr En JavaScript, la forma típica de hacerlo es con el ||operador, ya que cortocircuita si el valor de la izquierda es verdadero.
Peter Olson
142

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.

Jeffrey Roosendaal
fuente
44
Estaba luchando con ternary y finalmente encontré esta respuesta. ¡Gracias!
Ljubisa Livac
Si no tuviera que usar las llaves alrededor del operador ternario 'Hello ' + (username ? username : 'guest'), Hello + si se ignora y solo se devuelve el resultado de la operación ternaria. ¿Alguien puede explicar por qué?
Shiva
2
@Shiva Sin los corchetes, evalúa toda la parte izquierda: lo 'Hello ' + usernamecual es siempre true, porque es una cuerda con una longitud mayor que 0.
Jeffrey Roosendaal
26

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:

Michael Robinson
fuente
55
En realidad se llama el operador condicional.
ChaosPandion
55
Es un operador condicional ternario
Petah
44
@Michael: consulte la sección 11.12 Operador condicional (? :) De
ChaosPandion
77
¿La gente sigue discutiendo sobre estas cosas? Geez
BoltClock
77
@BoltClock: no discutiendo exactamente, simplemente tratando de normalizar nuestro vocabulario esencial.
ChaosPandion
21

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;
}
David Tang
fuente
Buena explicación, pero el ejemplo es pobre ya que está asignando un valor booleano dependiendo del resultado de una expresión booleana, lo que tiene poco sentido. Prefieres usar var olderThan20 = age > 20;en su lugar.
BalusC
@BalusC - sí :) Me di cuenta de eso, ¡pero es difícil sacar ejemplos de mi sombrero! Pensará en una mejor ...
David Tang
9
z = (x == y ? 1 : 2);

es equivalente a

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

excepto, por supuesto, es más corto.

Ernest Friedman-Hill
fuente
7

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í

Arif
fuente
1
Esto es lo que estoy buscando.
Sazal Das
6

Se llama operador ternario.

tmp = (foo==1 ? true : false);
águila12
fuente
66
Se llama operador condicional. Resulta ser el único ejemplo de un operador ternario en el idioma.
Carreras de ligereza en órbita
tmp = foo == 1 hace lo mismo, así que sería suficiente
Robert Varga
6

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.

Simplans
fuente
5

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

Guy Keren
fuente
2

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 :

Jason Gennaro
fuente
var x = 1; y = (x == 1)? verdadero Falso;
augurone
2
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";
Gajendra D Ambi
fuente
1

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'

Travis Webb
fuente
44
Realmente ternario es el tipo de operador (es decir, tiene 3 partes). El nombre de ese operador ternario específico es conditional operator. Simplemente sucede que solo hay un operador ternario en JS, por lo que los términos se usan incorrectamente.
Gone Coding
1

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

Joakim Sandqvist
fuente
1

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>

Ajay2707
fuente
1

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.

PBrook
fuente
0

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

Srikrushna
fuente
0

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

Sunali Bandara
fuente
-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
fuente
puedes agregar html también con el operador ternario
Chandrashekhar Komati
eso es realmente no cómo se deben escribir ternaria misiones y también utilizar === == no de otra forma que puede ser que también acaba de hacer sunday ?.it debe habersun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley
el punto central del condicional ternario es acortar los valores de asignación condicional de lo contrario se debe sólo tiene que utilizar una sentencia if
TheRealMrCrowley
ahora dime que este es correcto o no. si dices mal, aún así esto está funcionando y estoy usando mi proyecto ..
Chandrashekhar Komati
Sé que "funciona" como lo tienes en el primer ejemplo, pero también lo que he proporcionado que pones como la segunda versión. Observe cuánta duplicación innecesaria hay en la versión superior frente a la que le di. JS es un código que se envía al navegador, por lo que la longitud del código es importante
TheRealMrCrowley