Como você usa o? : operador (condicional) em JavaScript?

434

Alguém pode me explicar com palavras simples o que é o ?:operador (condicional, "ternário") e como usá-lo?

silencioso
fonte
2
Esses são operadores. Os operandos são os valores com os quais você usa esses operadores.
BoltClock
7
Curiosidade: algumas linguagens (nomeadamente o Groovy ) têm um operando ?:(como você o escreveu, sem nenhuma declaração) - o operador Elvis . Muito esperto.
Rob Hruska,
possível duplicação de javascript se alternativa
Rob Hruska
3
Os símbolos do Google podem ser problemáticos, mas e os "operadores Javascript" do Google (e aprender todos eles)?
Nnnnnn
verifique esta entrada do wiki pt.wikipedia.org/wiki/Elvis_operator
Nerdroid

Respostas:

645

Este é um atalho de uma linha para uma instrução if-else. É chamado de operador condicional. 1 1

Aqui está um exemplo de código que pode ser reduzido com o operador condicional:

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

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

Isso pode ser reduzido com o seguinte ?::

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

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

Como todas as expressões, o operador condicional também pode ser usado como uma declaração autônoma com efeitos colaterais, embora isso seja incomum fora da minificação:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Eles podem até ser acorrentados:

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

Tenha cuidado, porém, ou você terminará com código complicado como este:

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

1 Freqüentemente chamado de "operador ternário", mas na verdade é apenas um operador ternário [um operador que aceita três operandos]. No entanto, é o único JavaScript atualmente.

Peter Olson
fonte
56
Apenas para esclarecer o nome: ternaryé o tipo de operador (ou seja, possui 3 partes). O nome desse operador ternário específico é o conditional operator. Acontece que existe apenas um operador ternário em JS, portanto os termos são mal utilizados.
Gone Coding
1
O formulário ternário @tryingToGetProgrammingStraight é tecnicamente uma expressão, e as expressões podem conter outras expressões para formar árvores de expressão. que o código ali é o que uma expressão árvore olha como :) ver: fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup
1
É altamente recomendável atualizar o exemplo para o caso de uso comum, não um caso de uso de efeito colateral frequentemente citado como abuso do operador.
TJ Crowder
7
Não sei por que há uma pequena parte da gramática na parte inferior, mas está incorreta. Se o javascript tiver apenas 1 de um tipo de operador, é definitivamente correto dizer O operador ternário e não Um operador ternário ... Dizendo "esse operador ternário é Um operador ternário em javascript (e é o único)" é bobo, basta usar THE e isso implica tudo isso.
18717 Andrew
1
@MarkCarpenterJr No JavaScript, a maneira típica de fazer isso é com o ||operador, pois ele provoca um curto-circuito se o valor à esquerda for verdadeiro.
Peter Olson
142

Eu quero adicionar alguns para as respostas dadas.

Caso você encontre (ou queira usar) um ternário em uma situação como 'exibir uma variável se estiver definida, senão ...', você pode torná-lo ainda mais curto, sem um ternário .


Ao invés de:

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

Você pode usar:

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

Este é um Javascripts equivalente ao operador ternário abreviado do PHP ?:

Ou até:

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

Ele avalia a variável e, se for falsa ou não definida, segue para a próxima.

Jeffrey Roosendaal
fonte
4
Eu estava lutando com ternários e finalmente encontrei esta resposta. Obrigado!
Ljubisa Livac
Se eu não usasse as chaves ao redor do operador ternário 'Hello ' + (username ? username : 'guest'), Hello + se ignorado e apenas o resultado da operação ternária é retornado. Alguém pode explicar o porquê?
Shiva
2
@Shiva Sem os brackes, ele evalutes a toda parte esquerda: 'Hello ' + username, que é sempre true, porque é uma string com um comprimento maior que 0.
Jeffrey Roosendaal
26

É chamado de operador 'ternário' ou 'condicional'.

Exemplo

O operador?: Pode ser usado como um atalho para uma instrução if ... else. Geralmente é usado como parte de uma expressão maior, onde uma declaração if ... else seria estranha. Por exemplo:

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

O exemplo cria uma sequência que contém "Boa noite". se for depois das 18h. O código equivalente usando uma instrução if ... else ficaria da seguinte maneira:

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

Da documentação JS do MSDN .

Basicamente, é uma declaração condicional abreviada.

Veja também:

Michael Robinson
fonte
5
Na verdade, é chamado de operador condicional.
precisa saber é o seguinte
5
É um operador condicional ternário
Petah
4
@ Michael - Consulte a seção 11.12 Operador condicional (? :) Da
ChaosPandion
7
As pessoas ainda estão discutindo sobre essas coisas? Nossa.
BoltClock
7
@BoltClock - Não exatamente discutindo, simplesmente tentando normalizar nosso vocabulário essencial.
precisa saber é o seguinte
21

É um pouco difícil pesquisar no Google quando tudo que você tem são símbolos;) Os termos a serem usados ​​são "operador condicional de javascript".

Se você vir mais símbolos engraçados em Javascript, tente procurar primeiro os operadores de Javascript: a lista de operadores do MDC . A única exceção que você provavelmente encontrará é o $símbolo .

Para responder sua pergunta, operadores condicionais substituem instruções if simples. Um exemplo é o melhor:

var insurancePremium = age > 21 ? 100 : 200;

Ao invés de:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}
David Tang
fonte
Boa explicação, mas o exemplo é ruim, pois atribui um valor booleano, dependendo do resultado de uma expressão booleana, o que faz pouco sentido. Você prefere usar var olderThan20 = age > 20;.
precisa saber é o seguinte
@ BalusC - sim :) Eu percebi isso, mas exemplos são difíceis de tirar do meu chapéu! Vai pensar em um melhor ...
David Tang
9
z = (x == y ? 1 : 2);

é equivalente a

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

exceto, é claro, é mais curto.

Ernest Friedman-Hill
fonte
7

A maioria das respostas está correta, mas quero acrescentar um pouco mais. O operador ternário é associativo à direita, o que significa que pode ser encadeado da seguinte maneira 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; }
}

Mais detalhes estão aqui

Arif
fonte
1
É isso que estou procurando.
Sazal Das
6

É chamado de operador ternário

tmp = (foo==1 ? true : false);
eagle12
fonte
6
É chamado de operador condicional. Ele passa a ser o único exemplo de um operador ternário na língua.
Lightness Races em órbita
tmp = foo == 1 faz a mesma coisa, então seria o suficiente
Robert Varga
6

Operador ternário

Geralmente, temos declarações condicionais em Javascript.

Exemplo:

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

mas contém duas ou mais linhas e não pode ser atribuído a uma variável. O Javascript tem uma solução para este Operador ternário de problemas . O operador ternário pode escrever em uma linha e atribuir a uma variável.

Exemplo:

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

Este operador ternário é semelhante na linguagem de programação C.

Simplans
fonte
5

Ei, companheiro, lembre-se de que o js funciona avaliando como verdadeiro ou falso, certo?

vamos dar um operador ternário:

questionAnswered ? "Awesome!" : "damn" ;

Primeiro, js verifica se questionAnswered é trueou false.

if true( ?) você receberá "Awesome!"

else ( :) você ficará "maldito";

Espero que isso ajude amigo :)

Guy Keren
fonte
2

É if statementtudo em uma linha.

assim

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

A expressão a ser avaliada está no ( )

Se for verdadeiro, execute o código após o ?

Se corresponder a falso, execute o código após o :

Jason Gennaro
fonte
var x = 1; y = (x == 1)? verdadeiro falso;
augurone
2
x = 9
y = 8

unário

++x
--x

Binário

z = x + y

Ternário

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";
Gajendra D Ambi
fonte
1

É chamado de ternary operator. Para mais informações, aqui está outra pergunta que respondi sobre isso:

Como escrever uma instrução IF else sem 'else'

Travis Webb
fonte
4
Na verdade, ternário é o tipo de operador (ou seja, possui 3 partes). O nome desse operador ternário específico é o conditional operator. Acontece que existe apenas um operador ternário em JS, portanto os termos são mal utilizados.
Gone Coding
1

Provavelmente, essa não é exatamente a maneira mais elegante de fazer isso. Mas para alguém que não está familiarizado com operadores ternários, isso pode ser útil. Minha preferência pessoal é fazer fallbacks de 1 linha em vez de blocos de condição.

  // 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 ternário

Joakim Sandqvist
fonte
1

Podemos usar com Jquery, bem como o comprimento, como no exemplo abaixo:

Suponha que tenhamos a caixa de texto GuarantorName que possui valor e deseja obter o nome e o sobrenome - pode ser nulo. Então, 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 o código abaixo com Jquery com 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
fonte
1

Expressões ternárias são muito úteis em JS, especialmente React. Aqui está uma resposta simplificada para as muitas boas e detalhadas fornecidas.

condition ? expressionIfTrue : expressionIfFalse

Pense expressionIfTruecomo o OG se a declaração for verdadeira;
pense expressionIfFalsecomo a declaração else.

Exemplo:

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

isso verificou o valor de x, o primeiro y = (valor) retornado se verdadeiro, o segundo retorno após os dois pontos: retornou y = (valor) se falso.

PBrook
fonte
0

O operador condicional (ternário) é o único operador JavaScript que utiliza três operandos. Este operador é freqüentemente usado como um atalho para a instrução if.

condition ? expr1 : expr2 

Se a condição for verdadeira, o operador retornará o valor de expr1; caso contrário, ele retornará o 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 mais esclarecimentos, leia o link do documento MDN

Srikrushna
fonte
0

Se você tiver uma condição, verifique a função da instância em javascript . é fácil de usar operador ternário . que precisará apenas de uma única linha para implementar. Ex:

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

uma função como essa com uma condição pode ser escrita da seguinte maneira.

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

doença ? se verdadeiro: se falso

Sunali Bandara
fonte
-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
fonte
você pode acrescentar html também com operador ternário
Chandrashekhar Komati
isso é realmente não como você deve escrever ternário atribuição e também usar === não == outro sábio você pode muito bem fazer sunday ?.it deve sersun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley
todo o ponto da condicional ternário é encurtar condicional valores de atribuição de outra forma você deve apenas usar uma instrução if
TheRealMrCrowley
Agora me diga que este está correto ou não. se você disser errado, então ainda este está funcionando e eu estou usando meu projeto ..
Chandrashekhar Komati
Eu sei que "funciona" como você o possui no primeiro exemplo, mas o mesmo que eu forneci para você colocar como segunda versão. Observe quanta duplicação desnecessária há na versão superior versus a que eu lhe dei. JS é o código que é enviado ao navegador, então o comprimento do código é importante
TheRealMrCrowley