如何在 JavaScript 中编写条件语句

介绍

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

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

条件语句根据结果执行特定操作true or false.

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

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

条件语句是计算机程序的逻辑、决策或流程控制的一部分。您可以将条件语句与“选择你自己的冒险”书，或者流程图。

在本教程中，我们将讨论条件语句，包括if, else, and else if关键词。我们还将介绍三元运算符。

如果语句

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

An if声明是用if关键字，后跟括号中的条件，大括号之间是要执行的代码。简而言之，它可以写成if () {}.

这是对基本原理的更长的检查if陈述。

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

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

作为一个例子，让我们考虑一个购物应用程序。假设，对于此应用程序的功能，已将一定数量的资金存入其帐户的用户随后希望从商店购买商品。

// 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!");
}

Output
You have enough money to purchase the item!

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

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

// 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。该代码块将被忽略，程序将继续执行下一行。

其他语句

With if语句，我们仅在语句计算结果为时执行代码true，但如果条件失败，我们通常会希望发生其他事情。

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

The else声明写在if语句，并且括号内没有条件。这是基本语法if...else陈述。

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

使用与上面相同的示例，我们可以添加一条消息，以显示帐户中的资金是否过低。

// 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.");
}

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

自从if条件不成功，代码继续执行else陈述。

这对于显示警告或让用户知道要采取哪些操作才能继续进行非常有用。通常成功和失败都需要采取行动，所以if...else比独奏更常见if陈述。

else if 语句

With if and else，我们可以根据条件是否满足来运行代码块true or 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 block.

你可以有任意多个else if必要时进行陈述。在很多情况下else if声明，switch陈述出于可读性考虑，可能会优先考虑。

作为多个的例子else if语句，我们可以创建一个评分应用程序，它将根据 100 分的分数输出字母等级。

该应用程序的要求如下：

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

下面我们将创建一组简单的if, else, and else if陈述，并根据给定的成绩对其进行测试。

// 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");
}

Output
B

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

虽然我们的grade的价值87从技术上讲也适用于C, D and F，语句将在第一个成功的语句处停止。因此，我们得到的输出为B，这是第一场比赛。

三元运算符

The 三元运算符，也称为条件运算符，用作if...else陈述。

三元运算符的语法为问号 (?) 后跟一个冒号 (:），如下所示。

(condition) ? expression on true : expression on false

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

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

// 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相当于这将是"You may enter." in the if声明，以及"You may not enter." in the else陈述。

结论

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

在这篇文章中，我们学习了如何使用if, else, and else if关键字，并涵盖语句的嵌套以及三元运算符的使用。