if...else

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

if...else 语句会在指定的条件为真时执行一个语句。如果条件为假，则会执行可选的 else 子句中的另一个语句。

尝试一下

语法

js
if (condition)
  statement1

// 带有 else 子句
if (condition)
  statement1
else
  statement2
condition

值为真或假的表达式

statement1

当条件为真时执行的语句。可为任意语句，包括嵌套了 if 的语句。要执行多条语句，使用块语句（{ /* ... */ }）将这些语句分组；若不想执行语句，则使用空语句。

statement2

如果 condition 为假且 else 从句存在时执行的语句。可为任意语句，包括块语句和嵌套的 if 语句。

描述

可以嵌套多个 if...else 语句以创建 else if 子句。请注意，JavaScript 中没有 elseif（单个词）关键字。

js
if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
// …
else
  statementN

要看看它如何工作，可以调整下嵌套的缩进：

js
if (condition1)
  statement1
else
  if (condition2)
    statement2
  else
    if (condition3)
      statement3
// …

要在一个子句中执行多条语句，可使用块语句（{ /* ... */ }）来组织这些语句。

js
if (condition) {
  statements1
} else {
  statements2
}

不使用块可能会导致令人困惑的行为，尤其是在代码是手动格式化的情况下。例如：

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a 是 1 并且 b 是 2");
  else
    console.log("a 不是 1");
}

这段代码看上去没什么问题，但是，执行 checkValue(1, 3) 会输出“a 不是 1”。这是因为在悬空 else 的情况下，else 子句会连接到最近的 if 子句。因此，上述代码在缩进适当的情况下看起来会是这样的：

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a 是 1 并且 b 是 2");
    else
      console.log("a 不是 1");
}

通常情况下，始终使用块语句是种很好的做法，特别是在涉及嵌套 if 语句的代码中。

js
function checkValue(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a 是 1 并且 b 是 2");
    }
  } else {
    console.log("a 不是 1");
  }
}

不要将原始的布尔值 true 和 false 与 Boolean 对象的真或假混淆。任何不是 false、undefined、null、0、-0、NaN 或空字符串（""）的值，以及任何对象（包括值为 false 的布尔对象），在用作条件时都被视为真。例如：

js
const b = new Boolean(false);
if (b) {
  console.log("b 为真"); // “b 为真”
}

示例

使用 if...else

js
if (cipherChar === fromChar) {
  result += toChar;
  x++;
} else {
  result += clearChar;
}

使用 else if

请注意，JavaScript 中没有 elseif 关键字。但是，你可以在 else 和 if 之间加上一个空格：

js
if (x > 50) {
  /* 做一些事情 */
} else if (x > 5) {
  /* 做一些事情 */
} else {
  /* 做一些事情 */
}

使用赋值作为条件

你几乎不应该在 if...else 语句中使用像 x = y 这样的赋值作为条件：

js
if ((x = y)) {
  // …
}

因为与 while 循环不同，条件只会被求值一次，所以赋值操作只会被执行一次。上述代码等价于：

js
x = y;
if (x) {
  // …
}

这更加清晰。然而，在极少数情况下，你可能需要这样做，while 文档有使用赋值作为条件一节，其中包含我们的建议。

规范

Specification
ECMAScript Language Specification
# sec-if-statement

浏览器兼容性

BCD tables only load in the browser

参见