JavaScript 三元运算符

摘要: 在本教程中，您将学习如何使用 JavaScript 三元运算符使代码更简洁。 

JavaScript 三元运算符简介

当您想要在条件计算结果为 true 时执行一个代码块时，通常使用 if…else 语句。例如

let age = 18;
let message;

if (age >= 16) {
  message = 'You can drive.';
} else {
  message = 'You cannot drive.';
}

console.log(message);Code language: JavaScript (javascript)

在这个例子中，我们显示了一条消息，如果年龄大于或等于 16，则表明此人可以开车。或者，您可以使用三元运算符代替 if-else 语句，如下所示

let age = 18;
let message;

age >= 16 ? (message = 'You can drive.') : (message = 'You cannot drive.');

console.log(message);Code language: JavaScript (javascript)

或者，您可以在表达式中使用三元运算符，如下所示

let age = 18;
let message;

message = age >= 16 ? 'You can drive.' : 'You cannot drive.';

console.log(message);Code language: JavaScript (javascript)

以下是三元运算符的语法

condition ? expressionIfTrue : expressionIfFalse;Code language: JavaScript (javascript)

在此语法中，condition 是一个表达式，其计算结果为一个布尔值，可以是 true 或 false。

如果条件为 true，则执行第一个表达式 (expresionIfTrue)。如果为 false，则执行第二个表达式 (expressionIfFalse)。

以下显示了在表达式中使用三元运算符的语法

let variableName = condition ? expressionIfTrue : expressionIfFalse;Code language: JavaScript (javascript)

在此语法中，如果 condition 为 true，则 variableName 将采用第一个表达式 (expressionIfTrue) 的结果，否则为 expressionIfFalse 的结果。

JavaScript 三元运算符示例

让我们看一些使用三元运算符的示例。

1) 使用 JavaScript 三元运算符执行多个语句

以下示例使用三元运算符执行多个操作，其中每个操作都用逗号隔开。例如

let authenticated = true;
let nextURL = authenticated
  ? (alert('You will redirect to admin area'), '/admin')
  : (alert('Access denied'), '/403');

// redirect to nextURL here
console.log(nextURL); // '/admin'Code language: JavaScript (javascript)

在这个例子中，三元运算符的返回值是逗号分隔列表中的最后一个值。

2) 简化三元运算符示例

请看以下示例

let locked = 1;
let canChange = locked != 1 ? true : false;Code language: JavaScript (javascript)

如果 locked 为 1，则 canChange 变量被设置为 false，否则设置为 true。在这种情况下，您可以使用布尔表达式进行简化，如下所示

let locked = 1;
let canChange = locked != 1;Code language: JavaScript (javascript)

3) 使用多个 JavaScript 三元运算符示例

以下示例显示了如何在同一个表达式中使用两个三元运算符

let speed = 90;
let message = speed >= 120 ? 'Too Fast' : speed >= 80 ? 'Fast' : 'OK';

console.log(message);Code language: JavaScript (javascript)

输出

FastCode language: JavaScript (javascript)

建议在使用三元运算符时，确保代码更易于阅读。如果逻辑包含许多 if...else 语句，则应避免使用三元运算符。

摘要

• 使用 JavaScript 三元运算符 (?:) 使代码更简洁。