变量 - 给信息贴标签

🎯 变量和值的核心概念

在编程世界中，我们需要处理各种各样的信息：

• 数值：比如 100（分数）、50（血量）、1（等级）
• 文本：比如 "小明"（名字）、"胜利"（状态信息）

变量就是存储这些信息的容器。就像：

• 📦 数值 → 数字容器
• 🏷️ 文本 → 文字容器

基本关系：

• 值：具体的数据（如 100、"小明"）
• 变量：存储值的容器（如 score、playerName）

接下来我们学习如何创建和使用变量.

使用提示

在开始学习之前，请记住：

1. 所有的例子代码都是可以点击运行来看结果 - 点击代码块上方的"运行"按钮
2. 你可以修改代码来体验 - 试着修改代码，看看会发生什么
3. 可以点击重置来恢复代码 - 如果不小心改乱了，点击"重置"按钮恢复原始代码

如何声明和使用变量

使用 let 声明变量

让我们从最基本的变量声明开始。

重要说明：关于"声明变量"和"创建变量"

对于初学者来说，你可以先理解为这两个是同一个意思：

• 声明变量：这是编程的正式术语
• 创建变量：这更符合新手的直观理解

让我们从最基本的变量声明（创建）开始：

解释每个部分：

• let - 这是关键字（keyword），英文是 "let"，意思是"让"或"允许"。关键字是编程语言中预先定义好的特殊单词，有特定的含义。

• score - 这是变量名（variable name），是我们给变量起的名字，就像储物盒上的标签。

• = - 这是赋值符号（assignment operator），表示把右边的值赋给左边的变量。

  • 特别强调：这个 = 不是数学中的"等于"，而是"赋值"的意思
  • 重要说明：关于赋值的详细概念和操作，我们将在下一节课中深入学习

• 100 - 这是我们要存储的值，一个数字。

• console.log() - 除了可以打印字符串和数字，也可以打印变量。当打印变量时，会显示变量中存储的值。

  • 比如 console.log("分数:", score) 会显示：分数: 100
  • 第一个参数 "分数:" 是字符串，会原样显示
  • 第二个参数 score 是变量，会显示变量中存储的值 100

另一个例子

• 字符串需要用双引号 " 包围

重要概念：变量的类型

当你声明变量时，TypeScript 会自动确定变量的类型（type）。

• score 变量的类型是数字（number），因为我们给它赋值了数字 100
• name 变量的类型是字符串（string），因为我们给它赋值了字符串 "勇者"
• 变量的类型一旦确定，就不能改变

简单数据类型总结：

• 字符串（string）：用于存储文本信息，需要用双引号 " 包围，比如 "小明"、"游戏胜利"
• 数字（number）：用于存储数值信息，可以直接写数字，比如 100、80、1

区分方法：

• 有引号的是字符串："100"（文本） vs 100（数字）
• 字符串用于显示文字信息，数字用于数学计算

提示：我们将在后面课详细学习字符串（string）和数字（number）等数据类型。

变量初始值的多种来源

在声明（创建）变量时，给变量赋的初始值有很多种方式可以获得。这里简单介绍几种常见的方式，让你对变量可以有更灵活的感觉：

一次声明多个变量

一次声明多个变量和我们之前学习的声明单个变量基本一样，只是需要用逗号 , 来分隔多个变量名字：

💡 学习提示：一次声明多个变量的方式在实际编程中比较少用到，但你需要能够看懂和理解这种写法。大多数时候，我们还是会使用一行声明一个变量的方式，这样代码更清晰易读。

声明多个变量并分别赋值

重要提醒：

• 使用逗号 , 分隔多个变量
• 每个变量都可以有自己的初始值

如何查看变量的值

使用 console.log() 显示变量内容

创建了变量之后，我们需要能够看到变量中存储的值。在编程中，要查看变量的值，必须使用 console.log() 这个工具。

重要说明：

• console.log() 的作用：这是编程中用来"打印"或"显示"信息的工具，让你能看到变量的值
• 必须主动使用：变量不会自动显示内容，你需要明确使用 console.log() 才能看到
• 可以同时显示多个内容：如 console.log("文字:", 变量) 会同时显示文字说明和变量值
• 调试的重要工具：当你不确定变量存储了什么值时，使用 console.log() 是最好的检查方法

如果不使用 console.log() 会怎么样？

记住：要看到变量的值，就必须使用 console.log()！

关于空格和空行

在编程中，空格和空行不会影响程序的执行，它们的主要作用是让代码更容易阅读。

让我们通过一个完整的例子来看空格和空行的各种使用方式：

关键规则说明

规则1：当有符号分隔时，空格是可选的

当代码中已经有符号（如 =、,、()、; 等）分隔时，是否添加空格不影响执行：

• name="勇者" 和 name = "勇者" 效果相同
• console.log("名字:",name) 和 console.log("名字:", name) 效果相同
• level=5; 和 level = 5 ; 效果相同
• console.log("分数") 和 console.log ("分数") 效果相同

规则2：当没有符号分隔时，必须用空格分隔单词

空行的使用

使用空行分隔不同逻辑的代码：

推荐的代码风格

虽然空格和空行不影响程序执行，但良好的代码格式能让代码更容易阅读：

1. 变量赋值：let name = "勇者"（符号两边加一个空格）
2. 函数调用：console.log("名字:", name)（逗号后面加一个空格）
3. 逻辑分组：用空行分隔不同功能的代码块
4. 保持一致：在整个程序中使用相同的格式风格

记住： 空格和空行是为了让人更容易阅读代码，计算机执行时会忽略这些空白字符。养成良好的代码格式习惯很重要！

变量命名规则

1. 只能包含字母、数字、下划线
2. 不能以数字开头
3. 不能使用空格
4. 区分大小写（score 和 Score 是不同的变量）

❌ 错误示例

以下变量名都是不合法的，会导致代码运行错误：

✅ 正确的写法

总结

今天我们学习了变量的基础知识，总结如下：

核心概念理解

1. 变量是存储信息的容器 - 用于存储数值（如100）和文本（如"小明"）
2. 值与变量的关系 - 值是具体数据，变量是存储值的容器

变量操作基础

3. 声明变量 - 使用 let 创建变量，这是编程的基础概念
4. 变量初始值来源 - 变量的初始值可以是直接数字、其他变量的值，或运算结果

重要规则和特性

5. 变量命名规则 - 使用有意义的英文名称，遵循命名规范
6. 类型安全 - TypeScript 中变量类型一旦确定就不能改变（如数字类型不能赋字符串值）

实用技能

7. 一次声明多个变量 - 了解使用逗号分隔多个变量的声明方式
8. 变量独立性 - 每个变量都是独立的容器，修改一个变量不会影响其他变量
9. 变量输出显示 - 要在控制台看到变量的值，必须使用 console.log()

掌握变量的基础概念为后续学习更复杂的编程概念打下了坚实基础。在下一节课中，我们将学习变量的赋值操作和更多高级用法。