JavaScript 三元运算符

本教程将帮助你学习如何使用一种叫作“三元运算符”的更简洁的语法替换 if/else 语句。

条件运算符——也被称为“三元运算符”——是 if/else 语句的另一种形式，可帮助你以更简洁的方式编写条件代码块。

条件运算符的语法如下所示：

conditional ? expression_when_true : expression_when_false;

首先，你需要编写一个计算结果为 true 或 false 的条件表达式。如果表达式返回 true，JavaScript 会执行你写在冒号运算符（:）左边的代码，当它返回 false 时，执行冒号运算符右边的代码。

为了理解它是如何工作的，我们将它与常规的 if/else 语句进行比较。假设你有一个小程序，它根据你的考试分数分配不同的等级：

• 当你的分数高于 80 时，等级为 “A”
• 否则，等级为 “B”

这是编写程序的一种方法：

let score = 85;
let grade;
if(score >= 80){
    grade = "A";
} else {
    grade = "B";
}

console.log(`Your exam grade is ${grade}`);

或者，你可以使用三元运算符编写上述代码，如下所示：

let score = 85;
let grade = score >= 80 ? "A" : "B";

console.log(`Your exam grade is ${grade}`);

三元运算符速记看起来比常规 if/else 语句更简洁、更短。

但是如果你的代码需要多个 if/else 语句怎么办？如果在评估中添加 “C” 和 “D” 等级会怎样？

let score = 85;
let grade;
if(score >= 80){
    grade = "A";
} else if (score >= 70) {
    grade = "B";
} else if (score >= 60) {
    grade = "C";
} else {
    grade = "D";
}

console.log(`Your exam grade is ${grade}`);

不用担心！你可以编写多个三元运算符来替换上面的代码，如下所示：

let score = 85;
let grade = score >= 80 ? "A" 
  : score >= 70 ? "B" 
  : score >= 60 ? "C" 
  : "D";

console.log(`Your exam grade is ${grade}`);

但是，不建议将多个 if/else 语句替换为多个三元运算符，因为这会使代码在将来更难阅读。对于这种情况，最好坚持使用 if/else 或 switch 语句。

谢谢阅读这篇教程

我希望它帮助你了解三元运算符的工作原理。如果你喜欢本教程，欢迎访问我的网站 sebhastian.com 以获取更多关于 JavaScript 的内容。

另外，我有一个关于 Web 开发教程（主要是 JavaScript 相关的）的免费的每周订阅邮件。

原文：Ternary Operator JavaScript If Statement Tutorial，作者：Nathan Sebhastian