1-5JavaScript类型转换

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

学习目标

• 能说明类型转换的必要性，并区分显式转换与隐式转换的触发方式。
• 能使用 Number()、parseInt()、parseFloat() 完成数字型转换，正确解释 NaN、布尔值、null、undefined 的转换结果及 parseInt() 与 parseFloat() 的差异。
• 能使用 String()、toString() 完成字符串型转换，使用 Boolean() 判断转换结果，并准确列举 6 种转换为 false 的情况。
• 能根据运算符两侧的数据类型预测隐式转换结果，包括算术/比较运算符转数字、+ 拼接字符串、! 转布尔及一元 + 转数字，并修复表单字符串相加问题。
• 能使用 if/else if、三元表达式、switch 编写分支，使用 while、for 编写循环，并用 break、continue 控制流程。
• 能综合运用类型转换、分支和循环完成 ATM 存取款、查询余额、退出等交互程序。

知识点

类型转换与为什么需要

类型转换，就是把一种数据类型转换成另外一种数据类型。为什么需要它？因为表单、prompt 取过来的数据默认是字符串类型，此时不能直接做加法运算。比如调试时输入第一个月工资 8000、第二个月工资 10000，如果直接相加，结果不是 18000，而是字符串拼接成 800010000。怎么想？先确认数据类型，再决定是手动写代码转换，还是让运算符自动转换。怎么做？可以用 typeof 检查，再用 Number() 等显式转换。易错点：不要看到“8000”像数字就以为它是数字类型，prompt 返回的是字符串。

显示转换：把其他类型转成数字型

为什么需要：prompt 得到字符串，做工资求和前要转成数字。怎么想：数据类型要明确、由程序员主导，常用 Number()；遇到 100px 这种“数字开头、后面带单位”的字符串，用 parseInt() 或 parseFloat()。怎么做：调试时先看 typeof Number('1') 是 number；Number('abcd') 返回 NaN，表示无法转成数字；Number(true) 是 1，Number(false) 是 0，Number(null) 是 0，Number(undefined) 是 NaN。易错点：parseInt('100.5px') 只保留整数，得到 100；parseFloat('100.5px') 才能得到 100.5；Number() 不能处理带单位的字符串。

// 第一个数字
let num1 = prompt('请输入第一个月工资:')
// 第二个数字
let num2 = prompt('请输入第二个月工资:')
//  输出结果
alert(Number(num1) + Number(num2))

// 通过显示转换的方式把其他类型转换为数字型
// 1. Number() 最常用的一种方式 推荐 
// 1.1 把字符串转换为数字型
console.log(typeof Number('1')) // 1   number
console.log(Number('abcd')) // NaN 如果无法完成转换则返回NaN 

// 1.2 把布尔值转换为数字型 true false 
console.log(Number(true))  // 1
console.log(Number(false)) // 0

// 1.3 把 null undefined 转换为数字型
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

// 2. parseInt() 和 parseFloat() 固定使用场景的   100px 只要100 不要px 
// 使用场景：把以数字开头的字符串，只保留数字这种情况下就可以使用 
console.log(parseInt('100px'))  // 100
console.log(parseInt('100.5px'))  // 100  parseInt() 只保留整数
console.log(parseFloat('100.5px'))  // 100.5 parseFloat() 可以返回小数

显示转换：转字符串与布尔型

为什么需要：有时需要字符串拼接或输出；布尔型后面学分支语句会用到。怎么想：转字符串首选 String()；转布尔型重点记住 6 种为 false 的情况：false、0、''、null、undefined、NaN，其余为 true。怎么做：String(1) 得到字符串 '1'；num.toString() 也能转字符串，括号里可写进制，如 num.toString(8) 得到 '12'，但开发中少用。易错点：Boolean('') 是 false，但非空字符串是 true；Boolean(0) 是 false，Boolean(1) 是 true。

// 1. 转换为字符串类型 
// 1.1 String(数据) 开发中提倡使用这种方式 
console.log(typeof String(1)) // '1'     string
console.log(String(true)) // 'true'     string

// 1.2 变量.toString(进制)
let num = 10
console.log(typeof num.toString()) //  string 
console.log(num.toString(10)) //  string   '10'
console.log(num.toString(8)) //  string   '12'

// 2. 转换为布尔型 Boolean  (重点) 因为接下来我们要学习分支语句需要用到
// 2.1 有6种情况为false： false 0 '' null undefined NaN (无，没有)
// 2.2 其余的都为true 
console.log(Boolean(false))  // false 
console.log(Boolean(0))  // false 
console.log(Boolean(1))  // true
console.log(Boolean(''))  // false
console.log(Boolean(null))  // false
console.log(Boolean(undefined))  // false
console.log(Boolean(NaN))  // false

隐式转换：运算符自动帮你转

为什么需要：某些运算符执行时，系统内部会自动转换类型，理解它才能解释 8 - '3'、'1999' * '2'、3 == '3' 的结果。怎么想：看运算符两侧的数据。怎么做：- * / > == 等常把字符串转数字；+ 作为正号可把字符串转数字；+ 作为加号时，只要两侧有一个字符串就拼接；! 逻辑非会转布尔型。易错点：+ 有歧义，+'123' 是数字 123，'pink' + 18 是字符串 'pink18'；开发中尽量统一数据类型再计算，减少隐式转换带来的错误。

// // 第一个数字
// let num1 = +prompt('请输入第一个月工资:')
// // 第二个数字
// let num2 = +prompt('请输入第二个月工资:')
// //  输出结果
// alert(num1 + num2)

// 1. 隐式转换为数字型的运算符
// 1.1 算术运算符 - *  /   比较运算符  >   ==
console.log(8 - '3') // 5
console.log('1999' * '2') //  3998
console.log(3 > '1')   // true
console.log(3 == '3')  // true

// 1.2 + 正号使用的时候，也会把字符串转换为 数字型
console.log('123')  // '123'
console.log(+'123')  // 123
console.log(typeof +'123')  // number

// 2. 隐式转换为字符串型的运算符   + 拼接字符串 两侧只要有一个是字符串，结果就是字符串
console.log('pink' + 18)
console.log('' + 18)  // '18'

// 3. 隐式转换为布尔型的运算符  ！逻辑非
console.log(!true)  // false 
console.log(!0)  // true
console.log(!'')  // true
console.log(!null) // true
console.log(!undefined)  // true
console.log(!NaN)  // true
console.log(!false)  // true
console.log(!'pink') // false

从表达式到语句：先分清“值”和“动作”

为什么需要：写程序不能只会“算出一个值”，还要让代码按顺序、按条件、按次数执行。表达式负责产生值，语句负责执行动作，后面的分支和循环都是语句。

怎么想：看到 5 < 3 ? '真的' : '假的'，它本身是一个表达式，能得到一个结果；看到 if (...) { ... }，它是在指挥程序“满不满足条件，执不执行这段代码”。

怎么做：先用 console.log() 观察表达式结果，再写 if、while 等语句控制执行流程。笔记中的体验代码可以这样看：

if ('') {   // 类型转换 类似于 Boolean()
  console.log('我想要被表扬')
}

易错点：表达式可以参与运算或打印，语句不能当成一个“值”随便赋给变量；条件位置虽然不是布尔值，也会发生隐式转换。

if 分支语句：按条件选择执行

为什么需要：程序经常要“满足条件才做某事”，例如分数达到 700 才提示录取。

怎么想：先写条件表达式，再写满足条件时执行的代码。小括号里的结果会按布尔值判断；不是布尔类型时，类似 Boolean() 转换。转写稿里强调过：false、0、空字符串、null、undefined、NaN 这类“空/没有/假”的情况会转为 false，其余多为 true。

怎么做：

let score = +prompt('请您输入高考成绩:')
if (score >= 700) {
  alert('恭喜您考入黑马程序员')
}

易错点：prompt() 取回的是字符串，直接比较数字容易出问题，所以用 +score 转成数字；大括号只有一条语句时可省略，但不提倡。

if 双分支与多分支：两条路和多级判断

为什么需要：双分支处理“满足就 A，否则 B”；多分支处理多个区间条件，比如成绩评语。

怎么想：双分支用 if...else；多分支用 if...else if...else。多分支判断区间时，如果用了“大于等于”，成绩要从大往小写，否则前面的条件会先拦住后面的情况。

怎么做：

let uname = prompt('请您输入用户名:')
let pwd = prompt('请您输入密码:')
if (uname === '刘德华' && pwd === '123456') {
  alert('登录成功，欢迎回来~')
} else {
  alert('登录失败，您输入的用户名和密码错误~')
}

let score = +prompt('请您输入考试成绩:')
if (score >= 90) {
  alert('优秀，棒棒棒~')
} else if (score >= 70) {
  alert('良好，棒棒~')
} else if (score >= 60) {
  alert('及格，棒~')
} else {
  alert('不及格，好好加油，你可以的~')
}

易错点：else if 可以有很多个，else 不是必须；区间判断顺序写反，会导致结果不符合预期。

三元运算符与 switch：简短双分支和等值判断

为什么需要：简单双分支用三元更短；多个固定值匹配时，switch 读起来清楚。

怎么想：三元是“条件 ? 表达式1 : 表达式2”；switch 是拿表达式的值去全等于各个 case 的值，匹配后执行，通常要 break。

怎么做：

let x = 100
let y = 20
console.log(x > y ? x : y)

let fruits = '苹果'
switch (fruits) {
  case '香蕉':
    alert('香蕉的价格是: 3元/斤')
    break
  case '苹果':
    alert('苹果的价格是: 4元/斤')
    break
  case '橘子':
    alert('橘子的价格是: 2元/斤')
    break
  default:
    alert('没有查到此水果')
}

易错点：三元适合简单双分支，复杂逻辑别硬塞；switch 一般是等值判断，且要求全等于；漏写 break 会造成 case 穿透。

断点调试：看程序到底怎么走

为什么需要：分支和循环多了以后，光看代码容易猜错执行顺序，断点能让程序停在某一行，观察变量和走向。

怎么想：先按 F12 打开开发者工具，进入 Sources，选择代码文件，在目标行加断点；程序执行到断点会暂停。

怎么做：在 if 条件或循环体前加断点，刷新页面后逐步执行，观察条件真假和变量变化。

易错点：断点加在不会执行到的位置，会误以为程序没运行；调试完要记得取消断点。

while 与 for 循环：重复执行代码

为什么需要：重复打印、重复询问、重复计算，不能靠复制粘贴十遍。

怎么想：循环三要素是初始值、循环条件、变量计数。while 先判断再执行；for 把三要素写在括号里，更集中。

怎么做：

let i = 1
while (i <= 3) {
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++
}

for (let i = 1; i <= 3; i++) {
  document.write('键盘敲烂要行动，前端行业一览众~ <br>')
}

易错点：while 里忘记 i++ 会死循环；循环条件写错会导致一次不执行或多执行。

break、continue 与无限循环

为什么需要：有时结果已经得到，要提前结束；有时要跳过某一次；菜单类程序还常用无限循环反复询问。

怎么想：break 中止整个循环，continue 中止本次、继续下一次。while (true) 或 for (;;) 可构造无限循环，但必须设计退出条件。转写稿里的 ATM 案例就是反复弹出菜单，输入 1 存钱、2 取钱、3 查余额、4 退出，退出时用 break。

怎么做：

for (let i = 1; i <= 6; i++) {
  if (i === 3) {
    continue
  }
  document.write(`第${i}个孩子可以进入电影院<br>`)
}

while (true) {
  let love = prompt('你爱我吗?')
  if (love === '爱') {
    break
  }
}

易错点：break 和 continue 别混；无限循环没有 break 会一直弹窗或卡住；写循环前先想清楚“什么时候停”。

课件图示

代码示例

代码段 1：类型转换（显示转换 + 隐式转换）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类型转换示例</title>
</head>
<body>
  <script>
    // 显示转换：prompt 获取的是字符串，直接相加会拼接
    let num1 = prompt('请输入第一个月工资:')
    let num2 = prompt('请输入第二个月工资:')
    alert(Number(num1) + Number(num2))

    // 1. Number()
    console.log(typeof Number('1'))
    console.log(Number('abcd'))
    console.log(Number(true))
    console.log(Number(false))
    console.log(Number(null))
    console.log(Number(undefined))

    // 2. parseInt() / parseFloat()
    console.log(parseInt('100px'))
    console.log(parseInt('100.5px'))
    console.log(parseFloat('100.5px'))

    // 3. 转换为字符串
    console.log(typeof String(1))
    console.log(String(true))

    let num = 10
    console.log(typeof num.toString())
    console.log(num.toString(10))
    console.log(num.toString(8))

    // 4. 转换为布尔型：6 种 false
    console.log(Boolean(false))
    console.log(Boolean(0))
    console.log(Boolean(1))
    console.log(Boolean(''))
    console.log(Boolean(null))
    console.log(Boolean(undefined))
    console.log(Boolean(NaN))

    // 5. 隐式转换
    console.log(8 - '3')
    console.log('1999' * '2')
    console.log(3 > '1')
    console.log(3 == '3')
    console.log(+'123')
    console.log(typeof +'123')
    console.log('pink' + 18)
    console.log('' + 18)
    console.log(!true)
    console.log(!0)
    console.log(!'')
    console.log(!null)
    console.log(!undefined)
    console.log(!NaN)
    console.log(!false)
    console.log(!'pink')
  </script>
</body>
</html>

关键行与易错点：

• prompt 获取的数据默认是字符串，直接相加会变成字符串拼接，所以用 Number() 转成数字。
• Number('abcd') 转换失败返回 NaN；parseInt('100.5px') 只保留整数 100；parseFloat('100.5px') 保留小数 100.5。
• Boolean() 要记住 6 种 false：false、0、''、null、undefined、NaN，其余为 true。
• + 作为正号可把字符串转数字，如 +'123'；但 'pink' + 18 是字符串拼接。
• ! 逻辑非会触发隐式布尔转换，如 !0 为 true。

---

代码段 2：分支语句（if 多分支 + 三元运算符 + switch）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>分支语句示例</title>
</head>
<body>
  <script>
    // if 多分支：根据成绩输出评语
    let score = +prompt('请您输入考试成绩:')
    if (score >= 90) {
      alert('优秀，棒棒棒~')
    } else if (score >= 70) {
      alert('良好，棒棒~')
    } else if (score >= 60) {
      alert('及格，棒~')
    } else {
      alert('不及格，好好加油，你可以的~')
    }

    // 三元运算符：求两个数字的最大值
    let x = 100
    let y = 20
    console.log(x > y ? x : y)

    // switch：查询水果价格
    let fruits = '苹果'
    switch (fruits) {
      case '香蕉':
        alert('香蕉的价格是: 3元/斤')
        break
      case '苹果':
        alert('苹果的价格是: 4元/斤')
        break
      case '橘子':
        alert('橘子的价格是: 2元/斤')
        break
      default:
        alert('没有查到此水果')
    }
  </script>
</body>
</html>

关键行与易错点：

• +prompt() 利用正号把用户输入隐式转成数字，避免字符串比较问题。
• if 多分支判断区间时，条件要从大往小写，如先 >= 90，再 >= 70。
• 三元运算符 条件 ? 表达式1 : 表达式2 适合简单双分支，不要写得太复杂。
• switch 适合等值判断，且匹配要求全等 ===；漏写 break 会造成 case 穿透。
• default 用于没有匹配到任何 case 的情况。

---

代码段 3：循环语句（while + for + break / continue）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>循环语句示例</title>
</head>
<body>
  <script>
    // while 循环三要素：初始值、循环条件、变量计数
    let i = 1
    while (i <= 3) {
      document.write('月薪过万不是梦，毕业时候见英雄~<br>')
      i++
    }

    // for 循环：把初始值、循环条件、变量计数写在一起
    for (let j = 1; j <= 3; j++) {
      document.write('键盘敲烂要行动，前端行业一览众~ <br>')
    }

    // break：中止整个循环
    for (let k = 1; k <= 6; k++) {
      document.write(`我是第${k}个孩子 <br>`)
      if (k === 3) {
        break
      }
    }

    // continue：中止本次循环，继续下一次循环
    for (let m = 1; m <= 6; m++) {
      if (m === 3) {
        continue
      }
      document.write(`第${m}个孩子可以进入电影院<br>`)
    }

    // 无限循环：while(true) 必须配合 break 退出
    while (true) {
      let love = prompt('你爱我吗?')
      if (love === '爱') {
        break
      }
    }
  </script>
</body>
</html>

关键行与易错点：

• while 循环里不要忘记 i++，否则条件一直成立会造成死循环。
• for (初始值; 循环条件; 变量计数) 是最常用的循环写法，三个部分要写完整。
• break 是中止整个循环，continue 是跳过本次循环、继续下一次。
• while (true) 或 for (;;) 是无限循环，必须写 break 退出条件。
• 模板字符串反引号 `第\${i}个孩子` 用于拼接变量，注意使用反引号而不是普通引号。

常见错误

1. 现象：prompt 输入 8000 和 10000，相加得到 "800010000" → 原因：入口数据仍是字符串，+ 执行了拼接 → 修法：在入口统一转数值，如 Number(prompt(...)) 或 +prompt(...)，再做运算。
2. 现象：想从 "100px" 取 100，用 Number 得到 NaN → 原因：整体转换遇到非数字字符失败 → 修法：按需求改用 parseInt / parseFloat，并明确是否保留小数。
3. 现象：if (score = 700) 判断总是进入或成绩被改写 → 原因：把赋值 = 当成比较 → 修法：等值比较用 ===，并开启 ESLint 或人工复查条件表达式。
4. 现象：成绩多分支判断结果错乱，某些区间永远进不去 → 原因：区间顺序和边界没有设计好 → 修法：先画判定表，再按统一方向写区间，重点测试 60/70/90 边界。
5. 现象：switch 命中一个 case 后继续执行后面的分支 → 原因：漏写 break 造成穿透 → 修法：每个 case 结束补 break；若故意穿透，必须写注释说明。
6. 现象：while 页面卡死或浏览器无响应 → 原因：循环变量未更新，退出条件不闭环 → 修法：写循环前检查初始值、条件、更新三要素，调试时加最大次数保护。
7. 现象：登录判断用 == 时出现意外通过 → 原因：隐式转换让不同类型被当作相等 → 修法：关键等值判断统一用 ===，并检查两侧数据类型。

练习

1. 工资求和：输入两个月工资并输出总和；空值或非数字要给提示，页面不能出现字符串拼接结果。验收：输入 8000、10000 输出 18000。
2. 成绩评语：用 if...else if 实现 >=90 优秀、>=70 良好、>=60 及格、其余不及格。验收：分别测试 90/70/60/59。
3. 简易菜单：用 switch 实现 1 存款、2 取款、3 查余额、4 退出；非法选项要有默认提示，且每个分支不能穿透。
4. 循环控制：用 for 输出 1~20 中不是 3 的倍数的数；再改造成“找到第一个大于 10 且能被 7 整除的数就停止”。验收：前者不输出 3/6/9...，后者输出 14 后停止。
5. 类型判断：写出 Number('12px')、parseInt('12px')、parseFloat('12.5px')、Boolean('0')、+'123' 的结果，并说明生产代码中你会如何选择转换方式。

原视频对照

#	视频	时长
1	今日内容	03:31
2	显示转换为数字型	13:14
3	显示转换为字符串和布尔型	09:08
4	隐式转换	13:11

小结

1. 输入型数据先转换再计算，入口统一类型比事后补救可靠。
2. Number 适合整体转数值；parseInt/parseFloat 适合“数字开头带单位”的提取场景。
3. 布尔判断要围绕 6 个假值设计，业务代码尽量显式比较，别依赖记忆。
4. 区间判断优先用 if 多分支；等值枚举再用 switch，并处理 break 和 default。
5. 写循环先保证能退出，再谈逻辑；死循环优先查变量更新。
6. break 与 continue 要先在需求层面确定：终止整体还是跳过本次。
7. 隐式转换可读性差，团队代码应减少依赖；关键位置显式转换。
8. 边界值 0、''、NaN、null、undefined、60/70/90 要单独测试。