如何在JavaScript中编写条件语句

介绍

在编程中，很多情况下您会希望根据用户输入或其他因素运行不同的代码块。

例如，如果每个字段都正确填写，您可能希望提交表单，但如果缺少某些必填字段，您可能希望阻止该表单提交。为了完成这样的任务，我们有 条件语句 ，它是所有编程语言不可或缺的一部分。

条件语句根据 true 或 false 的结果执行特定操作。

您可能会看到的一些 JavaScript 条件语句示例包括：

检查用户的位置并根据国家/地区显示正确的语言
在提交时发送表单，或在缺少必填字段旁边显示警告
在点击事件上打开下拉菜单，如果下拉菜单已经打开，则关闭它
如果用户超过法定饮酒年龄，则显示酒精供应商的网站
显示酒店的预订表格，但如果酒店已预订则不显示

条件语句是计算机程序的逻辑、决策或流程控制的一部分。您可以将条件语句与“Choose Your Own Adventure”一书或流程图进行比较。

在本教程中，我们将介绍条件语句，包括 if、else 和 else if 关键字。我们还将介绍三元运算符。

如果语句

最基本的条件语句是 if 语句。 if 语句将评估语句是真还是假，并且仅在语句返回 true 时运行。在 false 结果的情况下，代码块将被忽略，程序将跳到下一节。

if 语句使用 if 关键字编写，后跟括号中的条件，要执行的代码在大括号之间。简而言之，可以写成if () {}。

这是对基本 if 语句的更长检查。

if (condition) {
    // code that will execute if condition is true
}

if 语句的内容是缩进的，包含要运行的代码块的大括号不以分号结尾，就像功能块一样。

例如，让我们考虑一个购物应用程序。比如说，对于这个应用程序的功能，一个用户在他们的账户中存入了一定数量的资金，然后想从商店购买一件物品。

shop.js

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
  console.log("You have enough money to purchase the item!");
}

OutputYou have enough money to purchase the item!

我们的账户余额为 500，想为 40 买一条牛仔裤。使用小于或等于运算符，我们可以检查牛仔裤的价格是否小于或等于我们拥有的资金量。由于 jeans <= balance 的计算结果为 true，因此条件将通过并且代码块将运行。

在一个新示例中，我们将创建一个成本高于可用余额的新商店商品。

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
    console.log("You have enough money to purchase the item!");
}

此示例将没有输出，因为 phone <= balance 的计算结果为 false。代码块将被忽略，程序将继续执行下一行。

其他声明

使用 if 语句，我们只在语句评估为 true 时执行代码，但如果条件失败，我们通常会希望发生其他事情。

例如，如果表单未正确提交，我们可能希望显示一条消息，告诉用户哪些字段填写正确。在这种情况下，我们将使用 else 语句，这是在原始条件不成功时将执行的代码。

else 语句写在 if 语句之后，括号中没有条件。这是基本 if...else 语句的语法。

if (condition) {
    // code that will execute if condition is true
} else {
    // code that will execute if condition is false
}

使用与上面相同的示例，如果帐户中的资金太少，我们可以添加一条消息来显示。

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
    console.log("You have enough money to purchase the item!");
} else {
    console.log("You do not have enough money in your account to purchase this item.");
}

OutputYou do not have enough money in your account to purchase this item.

由于 if 条件不成功，代码继续执行 else 语句中的内容。

这对于显示警告或让用户知道要采取什么行动继续前进非常有用。通常成功和失败都需要一个动作，所以 if...else 比单独的 if 语句更常见。

否则 if 语句

使用 if 和 else，我们可以根据条件是 true 还是 false 运行代码块。但是，有时我们可能有多个可能的条件和输出，并且需要的不仅仅是两个选项。一种方法是使用 else if 语句，它可以评估两个以上的可能结果。

这是包含 if 语句、多个 else if 语句和 else 语句的代码块的基本示例，以防没有条件评估为 true。

if (condition a) {
    // code that will execute if condition a is true
} else if (condition b) {
    // code that will execute if condition b is true
} else if (condition c) {
    // code that will execute if condition c is true
} else {
    // code that will execute if all above conditions are false
}

JavaScript 将尝试按顺序运行所有语句，如果没有一个成功，则默认为 else 块。

您可以根据需要拥有尽可能多的 else if 语句。在许多 else if 语句的情况下，switch 语句可能更易于阅读。

作为多个 else if 语句的示例，我们可以创建一个评分应用程序，该应用程序将基于 100 分输出字母评分。

这个应用程序的要求如下：

90及以上成绩为A
80 到 89 的等级是 B
70到79的等级是C
60到69的等级是D
59或以下的等级是F

下面我们将创建一组简单的 if、else 和 else if 语句，并根据给定的成绩对它们进行测试。

成绩.js

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else if (grade >= 60) {
  console.log("D");
} else {
  console.log("F");
}

OutputB

在我们的示例中，我们首先检查最高分数，该分数将大于或等于 90。之后，else if 语句将检查是否大于 80、70 和 60，直到达到默认的 else不及格。

虽然 87 的 grade 值在技术上也适用于 C、D 和 F，但语句将停止在第一个那是成功的。因此，我们得到 B 的输出，这是第一个匹配项。

三元运算符

三元运算符，也称为条件运算符，用作 if...else 语句的简写。

三元运算符使用问号 (?) 后跟冒号 (:) 的语法编写，如下所示。

(condition) ? expression on true : expression on false

在上面的语句中，首先写入条件，然后是 ?。第一个表达式将在 true 上执行，第二个表达式将在 false 上执行。它与 if...else 语句非常相似，语法更紧凑。

在此示例中，我们将创建一个程序来检查用户是否为 21 或更老。如果是，它会将 "You may enter" 打印到控制台。如果不是，它会将 "You may not enter." 打印到控制台。

年龄.js

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;

Output'You may not enter.'

由于用户的 age 小于 21，因此将失败消息输出到控制台。与此等效的 if...else 将是 if 语句中的 "You may enter." 和 else 语句中的 "You may not enter."。

结论

条件语句为我们提供了流控制来确定程序的输出。它们是编程的基础构建块之一，几乎可以在所有编程语言中找到。

在本文中，我们了解了如何使用 if、else 和 else if 关键字，并介绍了语句的嵌套以及三元运算符的使用。