JavaScript 运算符和表达式

JavaScriptBeginner
立即练习

介绍

欢迎来到「JavaScript 运算符与表达式」实验。在本实践环节中,你将学习 JavaScript 编程的基础构建块:运算符和表达式。运算符是用于对值(操作数)执行操作的特殊符号,而表达式是任何解析为值的代码单元。

你将从加法、减法、乘法和除法等基本算术运算符开始。然后,你将探索加法运算符如何用于组合字符串,这一过程称为字符串连接。最后,你将学习方便的自增运算符。在本实验结束时,你将能够执行基本的 JavaScript 数据操作。

这是一个实验(Guided Lab),提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤,获得实际操作经验。根据历史数据,这是一个 初级 级别的实验,完成率为 96%。获得了学习者 99% 的好评率。

对数字使用加法运算符

在本步骤中,你将学习如何使用加法运算符(+)对数字进行加法运算。这是最常见的算术运算之一。

你的实验环境已在 ~/project 目录下设置好 index.html 文件和 script.js 文件。我们将在 script.js 文件中编写所有 JavaScript 代码。

首先,在屏幕左侧的文件浏览器中找到 script.js 文件。点击它在编辑器中打开。

现在,将以下代码添加到 script.js。这段代码声明了两个数字变量,将它们相加,并使用 console.log() 将结果打印到浏览器的开发者控制台。

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

添加代码后,按 Ctrl+S 保存文件。

要查看输出,请导航到界面顶部的 Web 8080 标签页。然后,按 F12 或右键单击页面,选择“Inspect”,然后点击“Console”标签页来打开开发者控制台。你应该会看到消息 The sum is: 15

Console output showing sum

应用减法和乘法运算符

在本步骤中,你将应用减法(-)和乘法(*)运算符。它们的工作方式与加法运算符类似,但执行不同的计算。

继续编辑 ~/project/script.js 文件。在现有代码下方添加以下代码行,以计算相同两个数字的差值和乘积。

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

再次保存文件(Ctrl+S)。刷新 Web 8080 标签页(你可以使用标签页内的刷新按钮)。开发者控制台现在将显示加法、减法和乘法的结果。

Console output showing difference and product

实现除法和模运算符

在本步骤中,我们将探索除法(/)和模(%)运算符。除法运算符执行标准除法,而模运算符返回除法的余数。这对于确定数字是奇数还是偶数等任务非常有用。

将以下代码添加到你的 ~/project/script.js 文件末尾。

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

保存文件并刷新 Web 8080 标签页。检查控制台以查看除法和余数的新输出。你应该会看到商是 2,余数是 1

Console output showing quotient and remainder

使用加号运算符连接字符串

在本步骤中,你将看到 + 运算符的另一种用法:字符串连接。当与字符串一起使用时,+ 运算符会将它们连接起来,创建一个新的、更长的字符串。

让我们创建两个字符串变量并将它们连接起来。将此代码添加到 ~/project/script.js 的末尾。

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

在上面的示例中,我们将 firstName、一个空格 " "lastName 连接起来,形成一个完整的短语。

保存文件后,刷新 Web 8080 标签页。控制台现在将显示连接后的字符串:Hello World

Console output showing concatenated string

使用 ++ 运算符递增变量

在最后一步中,你将学习递增运算符(++)。这是一个一元运算符,意味着它作用于单个操作数。它是为数字变量加 1 的便捷简写方式,这在循环和计数器中是非常常见的操作。

将以下代码添加到 ~/project/script.js 的末尾,以查看其效果。

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

最后一次保存文件并刷新 Web 8080 标签页。控制台将显示计数器的最终值,应为 1

Console output showing increment operator

总结

恭喜你完成了这个实验!

在本实验中,你学习了 JavaScript 运算符和表达式的基础知识。你练习使用了:

  • 用于基本数学运算的算术运算符:+(加法)、-(减法)、*(乘法)、/(除法)和 %(取模)。
  • + 运算符用于字符串连接,将文本组合在一起。
  • ++ 递增运算符作为将数字值增加一的快捷方式。

这些运算符是 JavaScript 中必不可少的构建块,几乎在所有程序中都会用到。现在你已经准备好在未来的项目中处理更复杂的逻辑和功能了。