在本教程中,您将学习如何使用 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 是一个计算结果为布尔值的表达式,可以是 truefalse

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

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

let variableName = condition ? expressionIfTrue : expressionIfFalse;

在此语法中,如果 conditiontrue,则采用第一个表达式 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 三元运算符 ?: 使代码更简洁。