if...else

if...else 语句在指定条件为 truthy 时执行语句。如果条件为 falsy,则将执行可选 else 子句中的另一条语句。

¥The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else clause will be executed.

Try it

语法

¥Syntax

js
if (condition)
  statement1

// With an else clause
if (condition)
  statement1
else
  statement2
condition

被视为 truthyfalsy 的表达式。

statement1

条件为 truthy 时执行的语句。可以是任何语句,包括进一步嵌套的 if 语句。要执行多个语句,请使用 block 语句 ({ /* ... */ }) 对这些语句进行分组。要不执行任何语句,请使用 empty 语句。

statement2

如果 conditionfalsy 并且 else 子句存在,则执行的语句。可以是任何语句,包括块语句和进一步嵌套的 if 语句。

描述

¥Description

可以嵌套多个 if...else 语句来创建 else if 子句。请注意,JavaScript 中没有 elseif(一个词)关键字。

¥Multiple if...else statements can be nested to create an else if clause. Note that there is no elseif (in one word) keyword in JavaScript.

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

要了解它是如何工作的,如果嵌套正确缩进,它会是这样的:

¥To see how this works, this is how it would look if the nesting were properly indented:

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

要执行子句中的多个语句,请使用块语句 ({ /* ... */ }) 对这些语句进行分组。

¥To execute multiple statements within a clause, use a block statement ({ /* ... */ }) to group those statements.

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

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

¥Not using blocks may lead to confusing behavior, especially if the code is hand-formatted. For example:

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a is 1 and b is 2");
  else
    console.log("a is not 1");
}

这段代码看起来很无辜 - 然而,执行 checkValue(1, 3) 将记录 "a 不是 1"。这是因为在 悬空的其他 的情况下,else 子句将连接到最近的 if 子句。因此,上面的代码在适当缩进后将如下所示:

¥This code looks innocent — however, executing checkValue(1, 3) will log "a is not 1". This is because in the case of dangling else, the else clause will be connected to the closest if clause. Therefore, the code above, with proper indentation, would look like:

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a is 1 and b is 2");
    else
      console.log("a is not 1");
}

一般来说,始终使用块语句是一个很好的做法,特别是在涉及嵌套 if 语句的代码中。

¥In general, it is a good practice to always use block statements, especially in code involving nested if statements.

js
function checkValue(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a is 1 and b is 2");
    }
  } else {
    console.log("a is not 1");
  }
}

不要将原始布尔值 truefalseBoolean 对象的真值或假值混淆。任何不是 falseundefinednull0-0NaN 或空字符串 ("") 的值,以及任何对象(包括值为 false 的布尔对象)在用作条件时都被视为 truthy。例如:

¥Do not confuse the primitive Boolean values true and false with truthiness or falsiness of the Boolean object. Any value that is not false, undefined, null, 0, -0, NaN, or the empty string (""), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. For example:

js
const b = new Boolean(false);
if (b) {
  console.log("b is truthy"); // "b is truthy"
}

示例

¥Examples

使用 if...else

¥Using if...else

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

使用 else if

¥Using else if

请注意,JavaScript 中没有 elseif 语法。但是,你可以在 elseif 之间写一个空格:

¥Note that there is no elseif syntax in JavaScript. However, you can write it with a space between else and if:

js
if (x > 50) {
  /* do something */
} else if (x > 5) {
  /* do something */
} else {
  /* do something */
}

使用赋值作为条件

¥Using an assignment as a condition

你几乎不应该将 if...else 与像 x = y 这样的作业作为条件:

¥You should almost never have an if...else with an assignment like x = y as a condition:

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

因为与 while 循环不同,条件仅计算一次,因此赋值仅执行一次。上面的代码相当于:

¥Because unlike while loops, the condition is only evaluated once, so the assignment is only performed once. The code above is equivalent to:

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

这更清楚了。然而,在极少数情况下,你发现自己想要做类似的事情,while 文档有一个 使用赋值作为条件 部分,其中包含我们的建议。

¥Which is much clearer. However, in the rare case you find yourself wanting to do something like that, the while documentation has a Using an assignment as a condition section with our recommendations.

规范

Specification
ECMAScript Language Specification
# sec-if-statement

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看