ternära operatörer i JavaScript

är du trött på att upprepa dig själv när du kodar? Använder du fortfarande de traditionella ’if…else’ – blocken? Vad händer om jag sa till dig, Du kan skriva 15 rader kod i 4 rader? Ring 1-800-ternära operatörer nu.

ternära operatörer är den korta versionen av if … else-uttalanden. Det är den enda villkorliga operatören i JavaScript som tar tre operander.

den grundläggande syntaxen för ternära operatörer är

villkor ? uttryck1 : Uttryck2

där villkoret är värdet som ska testas/utvärderas, kan
expression1 vara värde (er) av vilken typ som helst som ska utföras om villkoret är sant
expression2 kan vara värde(er) av vilken typ som helst som ska utföras om expression1 är falskt, dvs reservvärde som vanligtvis kallas ’else’
” ? ”betyder” om ” och ” : ”betyder ” annat”

Låt oss titta på ett exempel

om vi skulle bestämma om man får köra efter deras åldrar, med hjälp av If … else-uttalandena-det ser ut så här

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

med ternära operatörer kommer samma kod att se ut så här

var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!

Voila! Detta kodblock kommer att översättas till om variabeln ’ ålder ’är större eller lika med 16, webbläsaren ska varna’ du får köra!’, Annars ’ du borde vara 16 att köra!’bör varnas!

en annan anledning att anta ternära är att det är flexibilitet och miniatyrstorlek som kan passa var som helst i din kod. Om du till exempel vill bifoga resultatet av din sträng direkt till en sträng kan du enkelt göra det utan att behöva deklarera ditt tillstånd separat.

var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00

om isMember är sant , ’avgiften är $2.00’, annars ’avgiften är $10.00’.

gissa vad?! Du kan också tilldela resultaten av de ternära operationerna till variabler. Låt oss använda samma körexempel som vi använde tidigare.

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

i det här exemplet sparade vi resultatet i en variabel och visade det senare i konsolen.

det finns lika mycket möjligt i ternära operatörer som i det traditionella if…else-blocket. Flera ternära operatörer kan kedjas ihop för att bilda det vi kallar” om…annars om…annars ” block.

var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!

kodblocket ovan kommer att översättas om året är mindre än 2018, webbläsaren ska varna ’för tidigt’, annars, om året är större än 2018, kommer ’för sent’ att visas, annars om det inte är större eller mindre än dvs lika med, kommer ’exakt’ att visas.

du kan också ha kapslade if-uttalanden:

var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!

våra ögon skannar koder vertikalt, vilket indrag och utrymmen spelar stora delar för att hjälpa oss att läsa koderna enkelt. De är inte uteslutna i ternära, och lediga utrymmen påverkar inte din kod.

var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);

koden ovan fungerar lika bra som någon ternär utvärdering eller någon if…else-operation.

det är också möjligt att ha flera operationer per fall och separera dem med ett komma.

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

du kan också ha flera operationer och tilldela värdena till en variabel. Det sista kommaseparerade värdet kommer att tilldelas variabeln.

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"

sist men inte minst kan ternära operationer användas för att returnera värden i funktioner. Om vi till exempel skulle skriva en funktion för att returnera ett värde för att avgöra om Chris Pratt är medlem i Marvel Universe eller inte;

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

Observera att vi använde retur flera gånger och var tvungna att skriva if…else-uttalandet och bädda in sina värden i lockiga parenteser etc, vilket är bra. Men det kan förkortas med hjälp av ternära operatörer. Samma kod ovan kommer att utvärderas som sådan i ternär operation;

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

alla variabler som används i en ternär operation bör definieras innan åtgärden skapas.

om du gjorde det så här långt, tack!

lägg gärna till mig på Twitter och på Instagram

Lämna ett svar Avbryt svar