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);

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

let age = 18;
let message;

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

console.log(message);

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

let age = 18; let message;message = age >= 16 ? 'You can drive.' : 'You cannot drive.';console.log(message);代码语言： JavaScript  （javascript ）

这是三元运算符的语法：

condition ? expressionIfTrue : expressionIfFalse;

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

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

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

let variableName = condition ? expressionIfTrue : expressionIfFalse;

在此语法中，如果 condition 是 true，则采用第一个表达式 expressionIfTrue 表达式的结果赋值给变量 variableName 。

否则采用 expressionIfFalse 表达式的结果赋值给变量 variableName。

JavaScript 三元运算符示例

让我们举一些使用三元运算符的例子。

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'

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

简化三元运算符

请阅读以下示例：

let locked = 1;
let canChange = locked != 1 ? true : false;

如果 locked 为 1，则 canChange 变量的值为 false，否则为 true。在这种情况下，您可以使用布尔表达式简化它，如下所示：

let locked = 1;
let canChange = locked != 1;

使用多个 JavaScript 三元运算符

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

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

console.log(message);

输出：

Fast

当三元运算符使代码更易于阅读时，使用三元运算符是一种很好的做法。如果逻辑包含很多 if...else 语句，则应避免使用三元运算符。

结论

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