Operator Ternary dalam JS: Semua yang anda perlu tahu

Apa itu Ternary?

Operator Ternary ialah operator javascript yang tersedia merentas penyemak imbas sejak Julai 2015. Ia merupakan alternatif singkatan untuk pernyataan if/else. Operator ini digunakan secara meluas dalam bahasa pengaturcaraan yang berbeza seperti Java, C, Python tetapi tumpuan kami dalam artikel ini adalah pada javascript.

Mari kita lihat sintaks umum pengendali ternary.

condition ? ifTrue : ifFalse

Seperti yang anda lihat daripada contoh di atas, pengendali ternary menggantikan pernyataan if and else, dengan sewajarnya, dengan ? dan : simbol. Keadaan yang berada di sebelah kiri tanda soal akan diperiksa. Jika benar, ungkapan pertama yang mana antara ? dan tanda : akan dilaksanakan. Jika ia palsu, ungkapan terakhir yang ditulis selepas simbol : akan dilaksanakan.

Bagaimana ia berfungsi?

Untuk memahami cara pengendali ternary berfungsi, mari kita bandingkan dengan pernyataan if/else biasa.
Kod Javascript di bawah, akan log rentetan ke konsol, bersyarat.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Sekarang, mari tulis semula kod ini menggunakan operator ternary.

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

Pengendali ternary dalam blok kod ini secara bersyarat mencatat rentetan seperti yang kami maksudkan. Tetapi ada cara yang lebih baik untuk menulis kenyataan ini.
Operator Ternary bukan sahaja melaksanakan ungkapan tetapi juga mengembalikan nilai. Oleh itu, daripada menggunakan operator untuk mengendalikan dua ungkapan console.log yang berbeza, kita boleh menulis pernyataan dengan cara ia mengendalikan dua nilai berbeza yang terdapat dalam satu pernyataan console.log.
Contohnya:

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

Keluaran baris ini akan sama dengan ungkapan ternary lain yang telah kami tulis sebelum ini. Tetapi kod ini lebih padat dan mudah dibaca.

Kami boleh menggunakan operator ternary untuk menetapkan nilai kepada pembolehubah secara bersyarat. Mari lihat contoh dengan pernyataan if/else biasa, kemudian tulis semula menggunakan ternary.

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

Jika a ialah 10, blok kod akan mendarabkannya dengan 5, jika tidak ia akan mendarabkan pembolehubah dengan 2 dan dalam kedua-dua kes, akan menetapkannya kepada b.
Alternatif menggunakan operator ternary adalah seperti berikut:

let a = 10
let b = a === 10 ? a * 5 : a * 2

Seperti yang anda lihat, adalah lebih mudah untuk menulis kod baris tunggal untuk operasi asas seperti ini.

Keadaan Bersarang

Kadang-kadang kita perlu menggunakan lebih daripada satu syarat jika/lain dalam satu sama lain. Operator ternary boleh digunakan untuk keadaan rantai.

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

Perangkaian keadaan yang ditunjukkan di atas boleh diwakili menggunakan operator ternary dengan cara berikut:

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

Seperti yang anda boleh ramalkan, ini boleh menjadi sangat kemas dengan mudah. Itulah sebabnya menggunakan operator ternary dalam pernyataan bersyarat kompleks tidak diperlukan.

Ternary dalam React

Jika anda pernah membina aplikasi React sebelum ini, anda mungkin tahu bahawa pemaparan bersyarat ialah topik penting. Pengendali ternary memudahkan operasi ini. Mari lihat contoh dari halaman rasmi React.
Ini ialah cara biasa menulis kenyataan:

condition ? ifTrue : ifFalse

Dan ini adalah pernyataan yang sama, tetapi menggunakan operator ternary.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Seperti yang anda lihat, ia kelihatan lebih baik. Oleh itu, kadangkala ia adalah pendekatan yang lebih bersih dan lebih baik untuk menulis pernyataan dengan ternary, terutamanya semasa bekerja dengan React. Tetapi dalam beberapa kes, pengendali ternary boleh membuat kod lebih sukar dibaca.

Dalam situasi lain yang manakah, pada pendapat anda, kita perlu menggunakan atau mengelak pengendali ternary? Tolong beritahu saya pendapat anda dalam ulasan!

Terima kasih kerana membaca.
Sila semak pautan ini untuk bacaan lanjut.

• Lagi tentang Operator Ternary: Operator Bersyarat (Ternary) - Dokumen Web MDN
• Lagi tentang Rendering Bersyarat dalam React: Rendering Bersyarat - React

Atas ialah kandungan terperinci Operator Ternary dalam JS: Semua yang anda perlu tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!