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

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

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;

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

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.

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

• Precedência do operador com o operador Javascript Ternary
• Wikipedia

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

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

é equivalente a

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

exceto, é claro, é mais curto.

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

É chamado de operador ternário

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

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.

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

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

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

É 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'

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

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>

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.

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

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

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