Sei stanco di ripeterti durante la codifica? Usi ancora i tradizionali blocchi “if else else”? E se te lo dicessi, potresti scrivere 15 righe di codice in 4 righe? Chiamare 1-800-TERNARIO-OPERATORI ora.
Gli operatori ternari sono la versione abbreviata delle istruzioni if else else. È l’unico operatore condizionale in JavaScript che prende tre operandi.
La sintassi di base per gli operatori ternari è
condizione ? espressione1 : espressione2
- dove la condizione è il valore da testare / valutare,
- expression1 può essere value(s) di qualsiasi tipo da eseguire se la condizione è true
- expression2 può essere value(s) di qualsiasi tipo da eseguire se expression1 è false cioè il valore di fallback comunemente noto come ‘else’
- “? “significa” se ” e ” : “significa ” altro”
Diamo un’occhiata ad un esempio
Se dovessimo determinare se uno è autorizzato a guidare per la loro età, usando le istruzioni if else else — sembra qualcosa di simile a questo
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 gli operatori ternari, lo stesso codice sarà simile a questo
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voilà! Questo blocco di codice si tradurrà in SE variabile ‘ età ‘ è maggiore o uguale a 16, il browser dovrebbe avvisare ‘Hai il permesso di guidare!’, ELSE ‘ Si dovrebbe essere 16 a guidare!’dovrebbe essere avvisato!
Un altro motivo per adottare ternario, è la sua flessibilità e le dimensioni in miniatura che potrebbero adattarsi ovunque nel tuo codice. Ad esempio, se si desidera allegare il risultato della stringa direttamente a una stringa, è possibile farlo facilmente senza dover dichiarare la propria condizione separatamente.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
SE isMember è vero, ‘La commissione è $2.00′, ALTRIMENTI’La commissione è $10.00’.
Indovina un po’?! È inoltre possibile assegnare i risultati delle operazioni ternarie alle variabili. Usiamo lo stesso esempio di guida che abbiamo usato in precedenza.
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!"
In questo esempio, abbiamo salvato il risultato in una variabile e successivamente visualizzato nella console.
C’è tanto possibile negli operatori ternari come nel tradizionale blocco if else else. Più operatori ternari possono essere concatenati insieme per formare quello che chiamiamo ‘IF ELSE ELSE IF ELSE ELSE” block.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
Il blocco di codice sopra si tradurrà se l’anno è inferiore a 2018, il browser dovrebbe avvisare ‘Troppo presto’, oppure, se l’anno è maggiore di 2018, verrà visualizzato ‘Troppo tardi’, altrimenti se non è maggiore o minore di cioè uguale a, allora verrà visualizzato ‘Esattamente’.
Puoi anche avere istruzioni if annidate:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
I nostri occhi scansioni codici verticalmente, che rientro e spazi giocano grandi parti nel aiutarci a leggere i codici facilmente. Non sono esclusi in ternario e gli spazi liberi non influenzano il tuo codice.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
Il codice sopra funzionerà altrettanto bene di qualsiasi valutazione ternaria o di qualsiasi operazione if else else.
È anche possibile avere più operazioni per caso e separarle con una virgola.
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!')
);
È anche possibile avere più operazioni e assegnare i valori a una variabile. L’ultimo valore separato da virgole verrà assegnato alla variabile.
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"
Ultimo ma non meno importante, le operazioni ternarie possono essere utilizzate per restituire valori nelle funzioni. Ad esempio, se dovessimo scrivere una funzione per restituire un valore per determinare se Chris Pratt è un membro dell’Universo Marvel o meno;
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!"
Si noti che abbiamo usato return più volte e abbiamo dovuto scrivere l’istruzione if else else e incorporare i loro valori tra parentesi graffe, ecc., il che è fantastico. Ma può essere abbreviato usando operatori ternari. Lo stesso codice sopra sarà valutato come tale nell’operazione ternaria;
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: tutte le variabili utilizzate in un’operazione ternaria devono essere definite prima della creazione dell’operazione.
Se sei arrivato fin qui, grazie!
Sentitevi liberi di aggiungere me su Twitter e su Instagram