1-3JavaScript基本数据类型

本页对应 第一章JavaScript基础，共 4 段视频，约 44 分钟。

学习目标

• 能声明数字型和字符串型变量，并使用 typeof 检测其类型，正确识别 number 与 string。
• 能说明单引号、双引号、反引号的使用场景，并正确处理字符串嵌套，避免引号就近匹配导致的语法错误。
• 能使用模板字符串的反引号和 \${变量名} 完成字符串与变量拼接，并说明其相比 + 拼接的优势及可换行特性。
• 能独立完成“输入姓名和年龄并输出到页面”的案例，按输入数据、保存处理数据、输出数据三步实现。
• 能说明布尔型、undefined、null 的取值与典型使用场景，区分“未赋值”和“赋值为空”，并指出 typeof null 返回 object 的现象。

知识点

常量是什么：先把它理解成“不能改的容器”

前面学变量时，我们把变量理解成一个“盒子”或“容器”，用来保存数据。常量也是一样的：它同样是一个容器，用来保存数据。区别只在于——常量里面保存的值不允许改变。

为什么需要常量？因为程序里有些值本来就不应该被改动。比如圆周率 3.14，在这个例子里我们希望它固定下来，不希望后面某一行代码不小心把它改成别的值。用常量保存，相当于给这个值加了一道“保护”，目的是让程序更安全。

怎么想？先判断这个数据以后会不会变：会变，用变量；不会变，用常量。怎么做？用 const 声明常量，并在声明时直接把值放进去：

// 常量： 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项：
// 1. 常量里面的值是不允许修改的
pi = 3.141592653
console.log(pi)
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
// const url

这段代码里，const pi = 3.14 表示声明一个常量 pi，里面保存 3.14。执行 console.log(pi) 时，控制台会输出这个值。接着写 pi = 3.141592653，问题就来了：常量不允许重新赋值，所以这里会报错，后面的输出也不会按你期望的方式继续执行。调试时可以把修改常量的那一行先注释掉，观察 console.log(pi) 的正常输出；再取消注释，观察报错。这样能直观看到“常量不可重新赋值”不是口头规则，而是代码会直接拦住。

易错点：不要把常量当成“可以随便改的变量”。只要用 const 声明，就不能再写 pi = ... 去重新赋值。

常量必须初始化：声明时就要赋值

为什么需要这条规则？因为常量一旦声明就不允许后面再改。如果允许先写 const url，后面再赋值，那“后面赋值”本质上也是一次修改/赋值动作，和常量“值不允许改变”的定位冲突。所以常量要求：声明的时候必须赋值，也就是必须初始化。

怎么想？可以拿变量做对比。转写稿里讲变量时提到：只声明一个变量、不给值时，变量的默认值是 undefined，说明它还没有装数据。变量可以先声明、后赋值；但常量不能照搬这个思路。常量要一步到位：声明的同时把值放进去。

怎么做？正确写法是声明和赋值写在一起，例如 const pi = 3.14。错误写法是只写 const url，没有等号和值。笔记里把 // const url 注释掉了，就是在提醒你：这一行如果直接运行，会因为常量没有初始化而报错。

易错点：不要写“先声明常量，后面再补值”。比如不要想着先 const url，再写 url = 'xxx'。常量必须在声明那一行就完成初始化。

使用场景：值永远不变时，用常量换安全

为什么需要常量？不是为了少写几个字符，而是为了表达意图：这个值在程序里应该固定，不能被后续代码随意改掉。笔记里说得很清楚：当某个值永远不会改变的时候，可以使用常量来保存，目的为了程序的安全。

怎么想？写代码时先问自己：这个数据是“过程量”还是“固定值”？比如价格、数量、计算结果可能会变，适合变量；而某个固定的配置值、固定的数学常量、某个不应该被改写的标记，就适合常量。这里不要过度扩展，先把本节的核心抓住：会变用变量，不变用常量。

怎么做？声明常量时用 const，并立刻赋值。命名上要能看出含义，比如 pi 表示圆周率。后面使用时直接读常量，不要试图重新赋值。

易错点：看到“常量”两个字，不要理解成“值的内容绝对深度不可变”这种超纲结论；本节只要求掌握基础规则：常量容器保存的值不允许重新赋值，且声明时必须初始化。也不要把变量可以“先声明后赋值”的习惯带到常量上。

调试与检查：用最小代码验证两条规则

为什么需要调试？因为常量的两个限制都会直接导致报错：重新赋值会报错，声明不初始化也会报错。只看笔记容易记混，动手验证最稳。

怎么想？把笔记里的代码分成两段实验：第一段只保留 const pi = 3.14 和 console.log(pi)，确认能正常输出；第二段加上 pi = 3.141592653，观察报错，确认“不允许重新赋值”；第三段再试 const url，观察报错，确认“必须初始化”。

怎么做？建议按下面顺序操作：先运行正常声明；再取消修改常量的代码，看到报错后把它注释回去；最后单独测试未初始化的常量。每次只改一个点，才能判断到底是哪条规则被触发。

易错点：不要同时保留多个错误行，否则报错来源容易混。也不要把变量那套“未赋值默认 undefined”直接套到常量上：变量可以只声明不赋值，常量不行。笔记最后的注意也再次强调：常量不允许重新赋值，声明的时候必须赋值（初始化）。

数据为什么要分类

计算机程序要处理大量数据，生活中也会把物品归类，不同物品不能混放。对数据分类，是为了让程序员在不同场景下选对数据、用对操作。比如计算小计要用数字，商品介绍要用文字。JS 的数据类型先分两大类：基本数据类型和引用数据类型；本节重点认识基本类型中的数字型、字符串型、布尔型、undefined，并理解 typeof 检测。

数字型

为什么需要：价格、数量、年龄等要参与加减乘除，必须用数字型。怎么想：JS 中整数、小数、正数、负数都归为 number。怎么做：用 let 保存数字，再用 typeof 检测；调试时看控制台返回 number 即正确。易错点：数字加了引号就变成字符串；不要把变量名加引号，否则输出的是字符串而不是变量里的值。

// 1. 数字型： 用于计算的， js数字类型包含： 整数、小数
// let num1 = 18
// let num1 = -18
let num1 = 18.88
// let num1 = -18.88
console.log(typeof num1)  // number   typeof 关键字检测数据类型

// 2. 字符串类型: 被引号包裹的一段文字信息   单引号 双引号  反引号
let goods = '笔记本电脑'
let address = "黑马程序员"
console.log(typeof goods)  // string
console.log(typeof address)  // string
let color = `粉红色`
let tel = '13612342234'
// 2.1 变量是不能加引号的,变量加了引号就不是盒子了，是一个字符串
console.log('goods')
// 2.2 字符串嵌套的问题. 不能嵌套自己, 外单内双  或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")

字符串型

为什么需要：姓名、地址、商品名、手机号等文字信息不能拿来算数，要用字符串保存。怎么想：只要被单引号、双引号或反引号包裹，就是字符串；单双引号本质区别不大，推荐单引号。怎么做：用 typeof 检测，返回 string；需要引号嵌套时用“外单内双”或“外双内单”。易错点：不能自己嵌套自己，如单引号里再直接写单引号会就近匹配导致报错；变量名加引号会变成普通字符串，调试时 console.log('goods') 输出的是 goods 这段文字，不是变量内容。

模板字符串

为什么需要：字符串和变量拼接时，老写法要反复写引号、加号，容易漏符号。怎么想：反引号包住整段文字，变量用 \${变量名} 放进去，代码更短更清楚。怎么做：对比 'pink今年' + age + '岁' 与 `pink今年\${age}岁`；调试时改 age 的值，输出跟着变。易错点：外层必须是反引号，不是单双引号；变量必须写 \${age}，不能只写 age；反引号中间可以换行，单双引号直接换行会报错。

// 1. 字符串拼接
let age = 91
// console.log('pink今年' + age + '岁')
console.log('pink今年' + age + '岁')

// 2. 模板字符串
console.log(`pink今年\${age}岁`)
// 3. 模板字符串里面的字符串可以换行

布尔类型

为什么需要：程序要判断“成立/不成立”，如登录是否成功。怎么想：布尔只有 true 和 false，true 表示肯定，false 表示否定。怎么做：用变量保存布尔值，再用 typeof 检测，返回 boolean。易错点：不要写成字符串 'true'；布尔不是用来存文字的，而是用于条件判断。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

undefined

为什么需要：变量声明后可能还没赋值，程序要能表示“暂时没有值”。怎么想：只声明不赋值，默认值就是 undefined；它可用来检测数据是否还没传进来。怎么做：声明 let tmp; 后检测，typeof tmp 返回 undefined。易错点：undefined 表示“没有赋值/值不存在”，不要拿它随意参与计算；变量声明未赋值时，不要误以为它是数字 0 或空字符串。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。 调试时先用 typeof 看返回值：number、string、boolean、undefined，再判断代码是否符合预期。

课件图示

代码示例

示例 1：常量 + 数字型 / 字符串型 + typeof 检测

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 常量与数据类型</title>
</head>
<body>

  <script>
    // 常量：也是一个容器，用来保存数据，但里面的值不允许改变
    const pi = 3.14
    console.log(pi)

    // 注意事项 1：常量里面的值是不允许修改的
    // pi = 3.141592653   // 报错：Assignment to constant variable

    // 注意事项 2：常量必须要初始化（声明常量的时候必须要赋值）
    // const url          // 报错：Missing initializer in const declaration

    // 1. 数字型：整数、小数、正数、负数
    let num1 = 18.88
    console.log(typeof num1)   // number

    // 2. 字符串型：被引号包裹的一段文字信息（单引号 / 双引号 / 反引号）
    let goods = '笔记本电脑'
    let address = "黑马程序员"
    let color = `粉红色`
    console.log(typeof goods)    // string
    console.log(typeof address)  // string
    console.log(typeof color)    // string

    // 加了引号的数字也是字符串
    let tel = '13612342234'
    console.log(typeof tel)      // string

    // 2.1 变量是不能加引号的，加了引号就不是盒子了，是一个字符串
    console.log('goods')   // 输出 goods
    console.log(goods)     // 输出 笔记本电脑

    // 2.2 字符串嵌套：不能嵌套自己，外单内双 或 外双内单
    console.log('今日特价"跳楼大甩卖"速速抢购')
    console.log("今日特价'跳楼大甩卖'速速抢购")
  </script>

</body>
</html>

关键行与易错点

• const pi = 3.14：常量声明时必须赋值，且之后不能再重新赋值，所以笔记里的 pi = 3.141592653 和 const url 两行一定要注释掉，否则整个 <script> 直接报错中断。
• typeof num1 → number，typeof goods → string：typeof 是检测数据类型的关键字，返回的是一个字符串。
• 引号决定类型：13612342234 是数字型，加上引号 '13612342234' 就变成字符串型了。
• console.log('goods') 和 console.log(goods) 结果完全不同：前者打印的是字符串 goods，后者打印的是变量里存的 笔记本电脑。
• 字符串嵌套时引号是"就近匹配"的，'今日特价'跳楼大甩卖'速速抢购' 这种写法会报错，必须外单内双或外双内单。

---

示例 2：模板字符串（字符串拼接 → 反引号 + ${}）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 模板字符串</title>
</head>
<body>

  <script>
    // 1. 字符串拼接（以前的写法）：数字相加，字符相连
    let age = 91
    console.log('pink今年' + age + '岁')

    // 2. 模板字符串：反引号 + ${变量}
    console.log(`pink今年${age}岁`)

    // 3. 反引号中间的字符串可以换行（单引号、双引号做不到）
    console.log(`pink今年${age}岁
牙都没了`)

    // 4. 案例：页面输出姓名和年龄（输入 → 处理 → 输出）
    let uname = prompt('请输入姓名')
    let age2 = prompt('请输入年龄')

    document.write(`大家好，我是${uname}，我今年${age2}岁了`)
  </script>

</body>
</html>

关键行与易错点

• 旧写法 'pink今年' + age + '岁'：变量必须放在引号外面，靠 + 拼接；'pink今年age岁' 这样把变量写进引号里，只会打印出字母 age。
• 模板字符串外层只能是反引号（Tab 键上方那个键），用单引号或双引号写 \${age} 不会生效。
• \${age} 里放的是变量名，不要写成 \${'age'}，否则输出的是字符串 age 而不是变量的值。
• 变量值改了，输出语句不用动：age 从 18 改成 19，\${age} 处自动跟着变，这就是模板字符串"更灵活"的地方。
• 换行只对反引号有效，单引号/双引号里直接回车会报错。

---

示例 3：布尔型、undefined、null

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>

  <script>
    // 1. 布尔型：只有 true（真）和 false（假）两个值
    let isCool = true   // 是的
    isCool = false      // 不
    document.write(typeof isCool)   // boolean
    console.log(isCool)             // false

    // 2. undefined：只声明变量，不赋值，变量的默认值为 undefined
    let tmp
    console.log(tmp)              // undefined
    document.write(typeof tmp)    // undefined

    // 3. null：空类型，只有一个值 null
    let obj = null
    console.log(typeof obj)       // object  —— JS 历史遗留 bug，null 仍属于基本数据类型
  </script>

</body>
</html>

关键行与易错点

• 布尔型只有 true 和 false 两个值，true 不加引号，写成 'true' 就变成字符串了。
• let tmp 只声明不赋值，默认值就是 undefined；但此时把鼠标放在变量上看提示是 any，因为没装数据时 JS 还不知道它是什么类型，必须用 typeof 才能检测出 undefined。
• undefined 与 null 的区别：undefined 是"没有赋值"（值不存在），null 是"赋了值，只是赋了一个空值"。
• typeof null 返回的是 'object'，这是 JS 一个悠久的 bug，不代表 null 是引用数据类型，它仍属于基本数据类型，不要纠结。
• 检测到变量是 undefined 时，说明数据还没传进来，就不要拿它去做加减乘除等运算，容易出问题。

常见错误

1. const 声明却不赋值

   • 现象：const url 直接报 SyntaxError: Missing initializer in const declaration，代码根本跑不起来。
   • 原因：常量必须在声明的同时完成初始化，没有"先声明、后赋值"这条路径。
   • 修法：声明即赋值 const url = 'http://xxx'；如果确实要先声明、之后再赋值，改用 let。

2. 用 const 存了后面会变的值

   • 现象：const count = 1; count = 2 报 TypeError: Assignment to constant variable。
   • 原因：选错了容器类型，把"会变的量"装进了不允许变的盒子里。
   • 修法：先问一句"这个值后面会重新赋值吗"，会变就用 let，永远不变才用 const；改容器，不是去想办法绕过限制。

3. 变量名加了引号

   • 现象：console.log('goods') 输出的是 goods 这四个字母，而不是变量里存的"笔记本电脑"。
   • 原因：加了引号就不再是变量，而是一段字符串字面量，typeof 检测出来也是 string。
   • 修法：用变量就裸写变量名 console.log(goods)；看到输出结果是变量名本身，第一时间检查有没有多余的引号。

4. 字符串里嵌套了同一种引号

   • 现象：console.log('今日特价'跳楼大甩卖'速速抢购') 报 SyntaxError: Invalid or unexpected token。
   • 原因：引号是就近匹配的，外层字符串被里面的第一个引号提前闭合，剩下的字符就成了非法代码。
   • 修法：遵守"外单内双 / 外双内单"，如 '今日特价"跳楼大甩卖"速速抢购'；内容复杂时直接用反引号包裹。

5. 拼接时漏加号，或把变量写进引号里

   • 现象：console.log('pink今年age岁') 输出 pink今年age岁；写成 'pink今年' age '岁' 则直接报错。
   • 原因：引号里的内容一律当文字，变量没有被"取出来"；而字符串与变量之间必须用 + 连接。
   • 修法：只要出现"字符串 + 变量"，直接换成模板字符串 `pink今年\${age}岁`，不要手写加号。

6. 模板字符串用错了引号

   • 现象：`...` 写成 'pink今年\${age}岁'，页面上原样输出 \${age}。
   • 原因：${} 只在反引号内才会被解析，单/双引号里它只是普通字符。
   • 修法：外层必须是反引号；同时确认输入法在英文状态，中文反引号、中文引号都会报错。

7. undefined 直接参与运算

   • 现象：let age; console.log(age + 1) 得到 NaN。
   • 原因：只声明未赋值，值还不存在，无法参与计算。
   • 修法：运算前先判断 typeof age === 'undefined'，或声明时给默认值 let age = 0。

8. 把 true 写成 'true'

   • 现象：if ('false') { ... } 分支竟然执行了。
   • 原因：加了引号就是非空字符串，转布尔为 true，布尔值只有不加引号的 true / false。
   • 修法：布尔值一律不加引号；判断前用 typeof 确认类型。

练习

练习 1（找错改错）

const pi = 3.14
pi = 3.14159
console.log(pi)

指出运行结果，并给出两种不同思路的修改方案（分别对应"值确实要变"和"值不该变"两种业务假设）。

练习 2（类型判断） 不运行代码，写出下列每行 console.log 的输出：

console.log(typeof 18)
console.log(typeof '18')
console.log(typeof true)
let tmp
console.log(typeof tmp)
let tel = '13612342234'
console.log(typeof tel)

练习 3（引号嵌套） 让页面上显示：今日特价"跳楼大甩卖"速速抢购，且双引号必须是字符串内容的一部分。请至少写出两种写法。

练习 4（改造拼接） 把下面代码改成模板字符串写法，要求输出完全一致：

let name = '刘德华'
let age = 19
document.write('大家好，我是' + name + '，我今年' + age + '岁')

练习 5（综合小案例） 用 prompt 依次让用户输入商品名称、单价、数量，再用模板字符串在页面上输出一行：笔记本电脑 单价 89 元，买 3 件共 267 元。要求：单价和数量要参与乘法计算，不能直接输出用户输入的原始文字。

参考答案要点

1. 报 TypeError: Assignment to constant variable；值会变 → 改 let；值不该变 → 删掉重新赋值那一行。
2. number、string、boolean、undefined、string。
3. '今日特价"跳楼大甩卖"速速抢购'（外单内双）或 `今日特价"跳楼大甩卖"速速抢购`。
4. document.write(`大家好，我是\${name}，我今年\${age}岁`)。
5. 关键点：prompt 拿到的单价是字符串，需要 Number() 或 + 转成数字再乘，否则 '89' * 3 之外的形式会变成字符串拼接。

原视频对照

#	视频	时长
1	基本数据类型-数字和字符串	15:53
2	模板字符串(重点)	11:45
3	输出姓名和年龄案例	04:51
4	基本数据类型-布尔未定义和空类型	12:09

小结

1. 默认先用 const，发现要重新赋值再换成 let——这个思考顺序比反过来更安全。
2. const 只有一条铁律：声明的那一刻就必须把值放进去。
3. 判断类型只认 typeof，但记住 typeof null 返回 'object' 是历史遗留问题，判断空值请用 === null。
4. 引号是 JS 里最容易被忽视的"类型开关"：加引号是字符串，不加才是变量或数字。
5. 引号嵌套记口诀"外单内双、外双内单"，本质是就近匹配，别和自己较劲。
6. 只要句子里出现"文字 + 变量"，无条件优先模板字符串，别手动拼 +。
7. 模板字符串三要素：外层反引号、变量用 ${} 包、中间可以换行。
8. undefined 是"还没给值"，null 是"主动给了个空"；拿到 undefined 就先别急着算，先判断、先兜底。