JavaScript中的三元操作符

方石剑
250 阅读4分钟

简介

三元运算符是一个三操作符，在大多数编程语言中都支持，包括JavaScript、Java、C++、C#和其他许多语言。它也被称为条件运算符，因为它被认为是条件 (if-else) 语句的一个更简洁的替代品。

在本指南中，我们将学习什么是三元运算符以及它在JavaScript中是如何工作的。同时，我们将与if-else 语句做一个简单的比较，这样我们就知道什么时候应该使用哪一个。

JavaScript中的三元运算符

和其他语言一样，JavaScript中的三元运算符有三个操作数。

(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;

我们可以很容易地把它翻译成相应的if-else 语句。

if (condition) {
    returnExpressionIfTrue;
} else {
    returnExpressionIfFalse;
}

这基本上意味着，condition 和returnExpressionIfTrue 对应于相应的if-else 语句的if 条款，而returnExpressionIfFalse 对应于上述语句的else 部分。

如果condition 的评价为true ，则执行returnExpressionIfTrue 的表达。另一方面，如果condition 评价为false ，则执行returnExpressionIfFalse 。

注意更准确地说，JavaScript检查condition 是否被评估为真值或假值。假值是指JavaScript在布尔表达式中评估为false 的所有值--false,none,undefined,NaN,0,-0,0n, 和"" 。所有其他的值在布尔表达式中被评估为true ，因此被认为是truthy。

如何使用三元操作符

解释三元运算符的一个完美方法是将其与if-else 语句进行比较。假设我们有一个特定的年龄，我们想检查一个用户是否比这个年龄小。

let age = 21;
let result;

if(age >= 20){
    result = "User can view content";
} else {
    result = "User cannot view content";
}
console.log(result);

让我们用三元运算符重写这个if-else 块。

let age = 21;
let result = age >= 20 ? "User can view content" : "User cannot view content";

console.log(result);

基本上，问号(?)前的任何东西都是我们要检查的条件。另外两个操作数是表达式，第一个在分号前(:)，第二个在分号后。如果条件是true ，result 的值将是"User can view the content" 。否则，分配给result 的值将是"User cannot view the content" 。

让我们看一下另一个有趣的例子。

let name = "John Doe";

if (name) {
    console.log("Hello " + name);
} else {
    console.log("Hello " + "Guest");
}

由于name 是一个非空字符串，它被认为是一个实数值。因此，这个例子将导致在控制台中记录"Hello John Doe" 。如果name 是一个空字符串 - 输出将是"Hello Guest" 。这种情况很容易转换为三元运算符。

let name = "John Doe";

name ? console.log("Hello " + name) : console.log("Hello " + "Guest");

虽然可能超出了本指南的范围，但另一个有趣的解决方案是使用逻辑or ，而不是三元运算符。这将使我们得到与其他两种方法完全相同的结果。

console.log("Hello " + (name || "Guest"));

用三元运算符处理多行表达式

看一下第一个表达式，我们会注意到，我们能够将一个五行的if-else 块折叠成一个单行的三元语句。假设我们想用三元运算符来处理多行表达式。

const age = 22;
let youth;

if (age <= 30) {
    youth = true;
    console.log("I am a Youth!");
} else {
    youth = false;
    console.log("I am an Adult!");
}

console.log(youth);

我们将不得不把这些表达式放在括号里，然后用逗号把每个表达式分开。

age <= 30
    ? ((youth = true), console.log("I am a Youth!"))
    : ((youth = false), console.log("I am an Adult!"));

尽管使用三元运算符的代码更短，但即使是这个两行的表达式也会使三元运算符相当难以阅读和理解。这就是为什么最好不要对多行表达式使用三元运算符的原因--在这样的情况下，更好的选择是坚持使用if-else 。

嵌套的三元运算符

嵌套三元运算符是指将三元运算符放在另一个运算符中的能力。当我们想评估多个条件时，就会使用这些语句。例如，通过if-else 语句，我们可以使用else if 语句将多个条件嵌套在一起。

let studentScore = 65;
let studentGrade;

if (studentScore >= 70) {
    studentGrade = "A";
} else if (studentScore >= 60) {
    studentGrade = "B";
} else if (studentScore >= 50) {
    studentGrade = "C";
} else if (studentScore >= 45) {
    studentGrade = "D";
} else {
    studentGrade = "E";
}

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

当我们用三元运算符实现这一点时，我们会有这样的结果。

let studentScore = 65;

let studentGrade = studentScore >= 70 ? "A" 
    : studentScore >= 60 ? "B" 
    : studentScore >= 50 ? "C" 
    : studentScore >= 45 ? "D" 
    : "E";

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

如果我们不注意，不正确理解三元运算符的工作原理，这很快就会变得难以阅读。更重要的是--即使你能读懂这个--你的同事呢？在这样的情况下，建议我们使用if-else 或switch 语句，而不是写一些会让别人感到困惑的代码。

结论

正如我们在本指南中所看到的，三元运算符和if-else 语句几乎可以互换使用，什么时候选择其中一个，取决于你的决定。一般来说，三元运算符不是用来最终取代if-else 语句的。相反，它的目的是在if-else 只会产生不必要的开销的情况下，成为一个有效的替代方案--当结果非常简单，除了简单的三元运算符之外，任何东西都会在代码中占用太多的空间。

在本指南中，我们看了一下什么是三元运算符以及如何在JavaScript中使用它。在开始的时候，它可能看起来有点吓人，但读完本指南后，你应该明白它是如何工作的，以及三元运算符和if-else ，所以你知道什么时候应该选择一个而不是另一个。

avatar
文章
阅读
粉丝