Artikel ini akan membincangkan sintaks operator ternary dalam JavaScript dan beberapa kegunaan biasa saya harap ia akan membantu anda!
Pengendali ternary (juga dikenali sebagai operator bersyarat) boleh digunakan untuk melakukan semakan bersyarat sebaris dan bukannya menggunakan if...else
kenyataan. Ia menjadikan kod lebih pendek dan lebih mudah dibaca. Ia boleh digunakan untuk menetapkan nilai kepada pembolehubah berdasarkan syarat, atau untuk melaksanakan ungkapan berdasarkan syarat.
Operator ternary menerima tiga operan; ia adalah satu-satunya operator dalam JavaScript yang boleh melakukan ini. Anda menyediakan syarat untuk menguji, diikuti dengan tanda soal, dan kemudian dua ungkapan yang dipisahkan oleh titik bertindih. Jika keadaan dianggap benar, ungkapan pertama dilaksanakan jika ia dianggap palsu, ungkapan terakhir dilaksanakan.
Ia digunakan dalam format berikut:
condition ? expr1 : expr2
Di sini, condition
ialah syarat untuk diuji. Jika nilainya dianggap true
, expr1
dilaksanakan. Jika tidak, jika nilainya dianggap false
, expr2
dilaksanakan.
expr1
dan expr2
ialah sebarang ungkapan. Ia boleh menjadi pembolehubah, panggilan fungsi atau keadaan lain.
Contohnya:
1 > 2 ? console.log("true") : console.log('false');
Salah satu kes penggunaan yang paling biasa untuk operator ternary ialah membuat keputusan yang mana Nilai diberikan kepada pembolehubah. Selalunya, nilai satu pembolehubah mungkin bergantung pada nilai pembolehubah atau keadaan yang lain.
Walaupun ini boleh dilakukan menggunakan pernyataan if...else
, ia menjadikan kod lebih panjang dan kurang boleh dibaca. Contohnya:
const numbers = [1,2,3]; let message; if (numbers.length > 2) { message = '数组太长'; } else { message = '数组太短'; } console.log(message); // 数组太长
Dalam contoh kod ini, anda terlebih dahulu mentakrifkan pembolehubah message
. Anda kemudian menggunakan pernyataan if...else
untuk menentukan nilai pembolehubah.
Ini boleh dilakukan hanya dalam satu baris menggunakan operator ternary:
const numbers = [1,2,3]; let message = numbers.length > 2 ? '数组太长' : '数组太短'; console.log(message); // 数组太长
tiga Meta operator boleh digunakan untuk melakukan apa-apa jenis ungkapan.
Sebagai contoh, jika anda ingin memutuskan fungsi mana yang hendak dijalankan berdasarkan nilai pembolehubah, anda boleh melakukannya menggunakan pernyataan if...else
berikut:
if (feedback === "yes") { sayThankYou(); } else { saySorry(); }
Ini boleh dilakukan dalam satu baris menggunakan operator ternary Completed in:
feedback === "yes" ? sayThankYou() : saySorry();
Jika feedback
mempunyai nilai yes
, maka sayThankYou
akan memanggil dan melaksanakan fungsi tersebut. Jika tidak, fungsi saySorry
akan dipanggil dan dilaksanakan.
Dalam banyak kes, anda mungkin berurusan dengan pembolehubah yang mungkin atau mungkin tidak mempunyai nilai yang ditentukan - contohnya, daripada pengguna Apabila memasukkan hasil carian, atau apabila mendapatkan semula data daripada pelayan.
Menggunakan operator ternary, anda boleh menyemak kewujudan pembolehubah dengan menghantar namanya sebagai ganti operan bersyarat null
. undefined
Ini amat berguna apabila pembolehubah ialah objek. Jika anda cuba mengakses harta null
pada objek yang sebenarnya undefined
atau ralat akan berlaku. Menyemak bahawa objek sebenarnya ditetapkan dahulu boleh membantu anda mengelakkan ralat.
Contohnya:
let book = { name: '小明', works: '斗破苍穹' }; console.log(book ? book.name : '张三'); // "小明" book = null; console.log(book ? book.name : '张三'); // "张三"
Dalam bahagian pertama blok kod ini, book
ialah objek dengan dua sifat - name
dan works
menggunakan operasi ternary pada Apabila simbol ialah book
, ia akan menyemak sama ada ia bukan null
atau undefined
. Jika tidak - bermakna ia mempunyai nilai - name
maka harta itu diakses dan akan dikeluarkan kepada konsol. Jika tidak, jika kosong, 张三
mencetak pada konsol.
Oleh kerana book
bukan null
, tajuk buku akan direkodkan dalam konsol. Walau bagaimanapun, dalam bahagian kedua, apabila syarat yang sama digunakan, syarat dalam operator ternary gagal kerana book
ialah null
. Oleh itu, "Zhang San" mengeluarkan konsol.
Walaupun pengendali ternary digunakan sebaris, berbilang syarat boleh digunakan sebagai sebahagian daripada ungkapan operator ternary. Anda boleh membuat sarang atau rantaian berbilang syarat untuk melakukan semakan bersyarat serupa dengan pernyataan if...else if...else
.
Sebagai contoh, nilai pembolehubah mungkin bergantung pada berbilang syarat. Ia berfungsi menggunakan if...else if...else
:
let score = '67'; let grade; if (score <p> Dalam blok kod ini, anda menguji berbilang syarat pada pembolehubah <code>score</code> untuk menentukan gred huruf pembolehubah. </p><p> Keadaan yang sama ini boleh dilakukan menggunakan pengendali ternary, seperti berikut: </p><pre class="brush:php;toolbar:false">let score = '67'; let grade = score <p> menilai syarat pertama, iaitu <code>score . Jika ia <code>true</code>, maka nilai <code>grade</code> ialah <code>F</code>. Jika ia <code>false</code>, ungkapan kedua dinilai, iaitu <code>score . </code></code></p><p>Ini berterusan sehingga semua syarat adalah <code>false</code>, yang bermaksud nilai pangkat akan menjadi <code>A</code>, atau sehingga salah satu syarat dinilai sebagai <code>true</code> dan nilai sebenarnya diberikan kepada <code>grade</code>. </p><h2 data-id="heading-5"><strong>示例</strong></h2><p>在这个实时示例中,您可以测试三元运算符如何在更多条件下工作。 如果您输入的值小于 100,则会显示“太低”消息。如果您输入的值大于 100,则会显示消息“太高”。如果输入 100,将显示“完美”消息。</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #result { display: block; } button, #result { margin-top: 10px; } </style> </head> <body> <div> <label for="number">输入一个数字</label> <input type="number" name="number" id="number" /> </div> <button>提交</button> <span id="result"></span> </body> <script> const button = document.querySelector('button'); const numberElm = document.querySelector('#number'); const resultElm = document.querySelector('#result'); button.addEventListener('click', function() { resultElm.textContent = numberElm.value > 100 ? '太高' : (numberElm.value < 100 ? '太低' : '完美'); }); </script> </html>
正如本教程中的示例所解释的,JavaScript 中的三元运算符有很多用例。if...else
在许多情况下,三元运算符可以通过替换冗长的语句来增加代码的可读性。
【相关推荐:javascript视频教程、编程基础视频】
Atas ialah kandungan terperinci Artikel yang menerangkan sintaks dan penggunaan biasa operator ternary dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!