变量与数据类型

这是什么：变量 = 给数据起的名字，一个贴了名字的盒子；JS 用 let（可改）和 const（定死）来声明它。

为什么用：上一章我们在控制台打了招呼。但程序不能只有"一句话"——它得记住东西：名字、价格、算到一半的结果。

如何用：在 F12 控制台里写一句 let name = '青蛙'，本章把字符串、数字、布尔这些类型都试一遍。

变量：let 和 const

let name = '青蛙'
const birthday = '10-19'

name = '小青蛙'          // let 声明的变量可以换值
console.log(name)        // 小青蛙
console.log(birthday)    // 10-19

「你会看到」控制台输出两行：小青蛙 和 10-19。

规则一句话：let 是"会变的"，const 是"定了就不许改"。拿不准就先用 const，需要改再换 let。（老教程里的 var 别学，新代码用不到它。）

关键字	能否重新赋值	适合
`let`	✅ 能	计数器、会变化的数据
`const`	❌ 不能	名字、配置等定死的值

五大常用数据类型

let s = '你好'     // 字符串（string）：文字，带引号
let n = 3.14       // 数字（number）：整数小数都是它
let ok = true      // 布尔（boolean）：只有 true / false
let empty = null   // null：故意放进去的"空"
let notYet         // undefined：声明了但还没赋值

「你会看到」：没有任何输出——这只是把值存进了变量。想看谁，就 console.log(谁)。

字符串还有个威力加强版——模板字符串：用反引号 ` 代替引号，变量直接嵌进 ${}：

let name = '青蛙'
console.log(`Hi ${name}，今天也要加油鸭`)

「你会看到」输出 Hi 青蛙，今天也要加油鸭。${} 里可以放任何变量甚至算式，比一堆 + 拼接清爽太多。

typeof：问一句"你是什么类型"

console.log(typeof '你好')      // string
console.log(typeof 42)          // number
console.log(typeof true)        // boolean
console.log(typeof null)        // object（历史遗留 bug，记住即可）
console.log(typeof undefined)   // undefined

「你会看到」每行输出对应括号里的注释。typeof 后面跟任何值，都会告诉你它的类型。

== 与 ===：永远用三个等号

console.log(1 == '1')    // true —— 数字 1 被偷偷转成了 '1'
console.log(1 === '1')   // false —— 类型不同，直接不等

「你会看到」一行 true、一行 false。== 比较前会"偷偷"转换类型，坑非常多；=== 既比值又比类型，结果才符合直觉。背下来：判断相等，永远用 ===。

记忆口诀：let 会变 const 定，模板字符串嵌变量；比相等，用三等。

❓ 常见问题

Q1：给 const 变量重新赋值，报 TypeError: Assignment to constant variable.？

原因：const 的意思是"定了就不许改"。你再给它赋值，等于想改一块刻好的石碑，浏览器当场拒绝。

TypeError: Assignment to constant variable.

修复三步：① 看报错行号，找到被赋值的那个变量名；② 想清楚它后面到底会不会变；③ 会变就把 const 改成 let，不会变就删掉那句重新赋值的代码。 举一反三：看到 TypeError 先问"是不是把不许改的改了"；这是 const 专属报错，见到它 100% 是这个原因。

Q2：console.log(nmae) 报 ReferenceError: nmae is not defined？

原因：定义时写的是 name，使用时手滑打成 nmae——JS 在通讯录里找不到叫 nmae 的人，只好报"未定义"。

ReferenceError: nmae is not defined

修复三步：① 对着报错行号跳过去；② 逐个字母对照定义处和使用处的拼写；③ 改到完全一致——大小写也算拼写，Name 和 name 互不相认。 举一反三：ReferenceError 新手期九成是拼错或没定义，变量越多越常见，养成立刻核对拼写的条件反射。

Q3：模板字符串写了 console.log('Hi ${name}')，输出的是 Hi ${name} 原文？

原因：${} 只在反引号 ` 里生效。你用的是单引号 '，JS 就把它当普通文字，$ 和 {} 原样吐出来。

Hi ${name}

修复三步：① 找到这行输出语句；② 把两头的 ' 换成反引号 `（键盘 Esc 下面那个键）；③ 确认 ${变量名} 拼写无误，再跑一遍。 举一反三：这种"不报错但结果不对"比报错更隐蔽——输出离谱时，先检查引号类型对不对。

Q4：写 let 3age = 3 报 SyntaxError: Invalid or unexpected token？

原因：变量名不能以数字开头。3age 在 JS 眼里是"数字 3 后面粘了个怪东西"，语法检查第一关就过不去。

SyntaxError: Invalid or unexpected token

修复三步：① 跳到报错行；② 把名字改成字母或下划线开头：age3、_age 都行；③ 记住起名规矩：字母/下划线/$ 开头，只用字母数字下划线。 举一反三：起名卡壳时就用"英文单词 + 数字"，如 price2；千万别让数字打头阵。

Q5：typeof null 返回 'object'，是电脑坏了吗？

原因：不是。null 明明表示"空"，类型却报 object——这是 JS 1995 年诞生时的历史遗留 bug，二十多年了改不掉（改了会弄坏无数老网页）。修复：不用修，背下来即可：typeof null 永远是 'object'，是个公认的"错误答案"。 举一反三：语言也有历史包袱。遇到"结果违反直觉"先搜索一下，很可能全世界的开发者都踩过同一个坑。

⚠️ 新手翻车现场

翻车一：给"石碑"重新刻字

const birthday = '10-19'
birthday = '10-20'

完整报错：

TypeError: Assignment to constant variable.

逐行分析：第 1 行没问题，错在第 2 行——birthday 是 const 声明的"死值"，第 2 行想给它换新值，等于往石碑上重新刻字，浏览器直接抛 TypeError。错在赋值那一行，不在声明那一行，看行号别看错地方。

正确写法：

let birthday = '10-19'
birthday = '10-20'

翻车二：同一个名字声明两次

let name = '青蛙'
let name = '蛙蛙'

完整报错：

SyntaxError: Identifier 'name' has already been declared

逐行分析：错在第 2 行——name 第 1 行已经登记过了，再写一遍 let name 等于在通讯录里登记两个同名的人，JS 拒绝。想换值直接 name = '蛙蛙'（不带 let）就行；只有新变量才配得上 let。

正确写法：

let name = '青蛙'
name = '蛙蛙'

翻车三：模板字符串用错引号，${} 集体失效

let name = '青蛙'
console.log('你好，${name}！')

完整报错：

你好，${name}！

逐行分析：这次不报错，但输出是原文 ${name}——错在第 2 行用了单引号。单引号里的一切都是普通文字，${name} 的"填坑魔法"只在反引号里生效。这是新手最阴的坑：程序安静地输出了一个错答案。

正确写法：

let name = '青蛙'
console.log(`你好，${name}！`)

📦 完整小示例

用 let、const 和模板字符串给呱小吉建一份会"自动更新"的档案：

// 档案数据：定了的用 const，会变的用 let
const name = '呱小吉'
let age = 3
let mood = '开心'

// 今天过生日，年龄和心情都会变
age = age + 1
mood = '超级开心'

// 模板字符串把数据嵌进句子
console.log(`我是 ${name}，今年 ${age} 岁，心情：${mood}`)
console.log(`name 的类型：${typeof name}`)
console.log(`age 的类型：${typeof age}`)

你会看到：

我是 呱小吉，今年 4 岁，心情：超级开心
name 的类型：string
age 的类型：number

🧪 在线运行

👀 运行结果

💡 代码可直接复制；想改、想跑，点右上「🧪 在线运行场」。

逐段中文精讲

第 2~4 行（声明区）：name 是名字，定了不改，用 const；age 和 mood 马上要变，用 let。先问会不会变，再选关键字——这个顺序想清楚，const/let 就永远不会选错。
第 7~8 行（更新区）：age = age + 1 读作"把 age 里的 3 拿出来加 1，再装回 age"，现在它是 4；mood 直接换成新值。let 对此毫无怨言。
第 11 行（播报区）：反引号 + ${} 三连：三个坑一次填完，句子读起来和人话一样。注意 ${age} 填进去的是更新后的 4——模板字符串用的是运行那一刻的值。
第 12~13 行（体检区）：${typeof name} 证明坑里还能放 typeof，输出 string 说明"呱小吉"是字符串；age 输出 number，就算它存的是整数 4。

跑通后做个小实验：把 age = age + 1 再复制一行，看年龄会不会变成 5；再把 const name 改成尝试 name = '蛙大吉'，亲眼看一次 TypeError: Assignment to constant variable.——报错见多了，就不怕了。

🎯 什么时候用它

购物车合计：let total = 0 起步，每加一件商品就 total = total + 价格——会变的钱用 let，这是前端最经典的累加场景。
用户信息展示：登录后把用户名存进 const，页面任何角落都能用模板字符串嵌一句"你好，${userName}"——定了不换的信息交给 const 最安心。
开关状态：夜间模式是开是关？let isDark = true 一个布尔变量扛下所有；点一下切换按钮就翻转它，页面跟着换装。

📝 本章小结

let 会变，const 定死；拿不准先用 const，需要改再换 let；var 是老古董别学。
五大常用类型：string（引号里的字）、number（整数小数通吃）、boolean（true/false）、null（故意放的空）、undefined（声明了没赋值）。
模板字符串三件套：反引号包裹、${} 填坑、坑里能放变量也能放算式。
判断相等永远用 ===，== 会偷偷转类型，坑多勿踩。
记忆锚点：const 是刻在石头上的字，let 是写在黑板上的字——石头改不了，黑板随时擦。

动手改

用 const 存你的名字，再用模板字符串输出"我是 XXX"
给 const 变量重新赋值，看看浏览器报什么错（红色 TypeError）
先猜 typeof '123' 是什么，再在控制台验证——引号里包着数字，它是啥类型？

下一章：函数，把代码打包成积木 🐸