← 返回首页

第2章: 变量与数据类型

学习如何存储和使用数据

什么是变量？

变量是用于存储数据的容器。可以把变量想象成一个带标签的盒子，用来存放不同的值。

let name = 'Alice';  // 存储字符串
let age = 25;        // 存储数字
let isStudent = true; // 存储布尔值

声明变量

JavaScript 有三种声明变量的方式：

1. let（推荐）

声明块级作用域的变量，可以重新赋值。

let name = 'Alice';
name = 'Bob';  // 可以修改

let count = 0;
count = count + 1;  // 可以修改

2. const（推荐）

声明常量，值不能被重新赋值。

const PI = 3.14159;
// PI = 3.14;  // 错误！不能修改

const birthYear = 1990;
// birthYear = 1991;  // 错误！

3. var（不推荐）

旧的声明方式，有作用域问题，不推荐使用。

var oldWay = 'Not recommended';
// 推荐使用 let 或 const 代替

💡 提示： 优先使用 const，只有当变量需要重新赋值时才使用 let。

变量声明演示

点击按钮查看演示

数据类型

JavaScript 有 7 种基本数据类型（原始类型）：

1. Number（数字）

整数和小数都是 Number 类型。

let age = 25;           // 整数
let price = 99.99;      // 小数
let negative = -10;     // 负数
let billion = 1e9;      // 科学计数法：1,000,000,000

2. String（字符串）

用引号包裹的文本。

let name = 'Alice';           // 单引号
let greeting = "Hello";       // 双引号
let message = `Hi, ${name}`;  // 模板字符串（反引号）

3. Boolean（布尔值）

只有两个值：true 或 false。

let isStudent = true;
let hasLicense = false;
let isAdult = age >= 18;  // 比较结果是布尔值

4. Undefined（未定义）

变量已声明但未赋值。

let x;
console.log(x);  // undefined

5. Null（空值）

表示"无"、"空"或"值未知"。

let user = null; // 明确表示没有值

6. Symbol（符号）

创建唯一的标识符（高级用法）。

let id = Symbol('id');

7. BigInt（大整数）

表示任意大的整数。

let bigNumber = 1234567890123456789012345678901234567890n;

数据类型演示

Number
let age = 25;
类型：数字

String
let name = 'Alice';
类型：字符串

Boolean
let isTrue = true;
类型：布尔值

Undefined
let x;
类型：未定义

typeof 运算符

使用 typeof 可以检查变量的数据类型。

console.log(typeof 42);          // "number"
console.log(typeof 'Hello');     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (这是历史遗留bug)
console.log(typeof Symbol('id')); // "symbol"

typeof 演示

点击按钮查看不同数据类型
                

类型转换

转换为字符串

let num = 123;
let str = String(num);     // "123"
let str2 = num.toString(); // "123"
let str3 = num + '';       // "123" (隐式转换)

转换为数字

let str = '123';
let num = Number(str);     // 123
let num2 = parseInt(str);  // 123 (整数)
let num3 = parseFloat('3.14'); // 3.14 (小数)
let num4 = +str;           // 123 (隐式转换)

转换为布尔值

Boolean(1);        // true
Boolean(0);        // false
Boolean('hello');  // true
Boolean('');       // false
Boolean(null);     // false
Boolean(undefined); // false

⚠️ 注意： 字符串 "0" 和 "false" 转换为布尔值时是 true！

字符串操作

字符串拼接

let firstName = 'Alice';
let lastName = 'Smith';
let fullName = firstName + ' ' + lastName;  // "Alice Smith"

模板字符串（推荐）

let name = 'Alice';
let age = 25;
let message = `我叫 ${name}，今年 ${age} 岁`;
// "我叫 Alice，今年 25 岁"

// 支持表达式
let result = `2 + 3 = ${2 + 3}`;  // "2 + 3 = 5"

常用字符串方法

let text = 'Hello, World!';

text.length;              // 13 (长度)
text.toUpperCase();       // "HELLO, WORLD!"
text.toLowerCase();       // "hello, world!"
text.includes('World');   // true
text.indexOf('World');    // 7
text.slice(0, 5);        // "Hello"
text.replace('World', 'JS'); // "Hello, JS!"

🎯 互动练习：变量和数据类型

输入不同的值，查看其数据类型：

尝试输入：

数字：123、3.14、-5
字符串：hello、"123"
布尔值：true、false
特殊值：null、undefined

🎯 互动练习：字符串拼接

使用模板字符串创建个人介绍：

填写信息后点击生成

本章小结

使用 let 声明可变变量，const 声明常量
7 种基本数据类型：Number、String、Boolean、Undefined、Null、Symbol、BigInt
使用 typeof 检查数据类型
可以使用 String()、Number()、Boolean() 进行类型转换
模板字符串（反引号）可以方便地拼接字符串和嵌入表达式
字符串有很多实用的方法：length、toUpperCase()、includes() 等