está cansado de se repetir enquanto codifica? Ainda usas os tradicionais blocos ” se…”? E se eu te dissesse que podias escrever 15 linhas de código em 4 linhas? Ligue para 1-800-operadores ternários agora.
os operadores ternários são a versão abreviada das declarações if…else. É o único operador condicional em JavaScript que leva três operandos.
a sintaxe básica para operadores ternários é
condição ? expressão1 : expressão2
- onde a condição é o valor a ser testada e avaliada,
- expressão1 pode ser de valor(es) de qualquer tipo para ser executado se a condição é true
- expressão2 pode ser de valor(es) de qualquer tipo para ser executado se expressão1 for falso eu.e fallback valor comumente conhecido como ‘outro’
- ” ? “significa” se”, e ” : “significa “pessoa”
vejamos um exemplo
Se nós fossemos para determinar se é permitido dirigir por suas idades, utilizando o if…else — parece algo como isto
var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"
Usando o operador ternário, o mesmo código será parecido com este
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Pronto! Este bloco de código traduzir-se-á para se a variável ‘age’ for maior ou igual a 16, o navegador deve alertar ‘você está autorizado a conduzir!’, ELSE ‘ você deve ter 16 anos para conduzir! devem ser alertados!
outra razão para adotar ternário, é a flexibilidade e tamanho miniatura que poderia caber em qualquer lugar em seu código. Por exemplo, se você quiser anexar o resultado de sua string diretamente a uma string, você pode facilmente fazer isso sem ter que declarar sua condição separadamente.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
se isMember for true , ‘The fee is $2.00’, ELSE ‘The fee is $10.00’.Adivinha?! Você também pode atribuir os resultados das operações ternárias para variáveis. Vamos usar o mesmo exemplo de condução que usamos antes.
var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"
neste exemplo, nós salvamos o resultado em uma variável e mais tarde mostramos no console.
há tanto quanto possível operadores ternários como no tradicional bloco if…else. Vários operadores ternários podem ser acorrentados juntos para formar o que chamamos de bloco ‘se…senão…”.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
o bloco de código acima traduzir-se-á se o ano for inferior a 2018, o navegador deverá alertar ‘cedo demais’, ou então, se o ano for superior a 2018, ‘tarde demais’ será exibido, caso contrário se não for maior ou menor do que I. E. igual a, então ‘exatamente’ será exibido.
também pode ter aninhado se:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
nossos olhos digitalizam códigos verticalmente, que a indentação e espaços desempenham um papel importante em nos ajudar a ler os códigos facilmente. Eles não são excluídos em ternário, e espaços livres não afetam o seu código.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
o código acima funcionará bem como qualquer avaliação ternária ou qualquer outra operação if.else.
também é possível ter várias operações por caso, e separá-las com uma vírgula.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);
pode também ter várias operações e atribuir os valores a uma variável. O último valor separado por vírgulas será atribuído à variável.
var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'),
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"
por último, mas não menos importante, as operações ternárias podem ser usadas para retornar valores em funções. Por exemplo, se fosse para escrever uma função para retornar um valor para determinar se Chris Pratt é um membro do Universo Marvel, ou não;
var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Aviso usamos retornar várias vezes e tive que escrever o if…else instrução e incorporar seus valores em colchetes, etc, o que é ótimo. Mas pode ser encurtado usando operadores ternários. O mesmo código acima será avaliado como tal em operações ternárias.;
var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Nota: Todas as variáveis utilizadas em uma operação ternária devem ser definidas antes da operação ser criada.
se chegaram até aqui, obrigado!Sinta-se à vontade para me adicionar no Twitter e no Instagram