交换两个变量的值与其他类型转number-string转nu（Day2 1/4）

本页对应 Day02_JavaScript，共 6 段视频，约 49 分钟。

学习目标

能准确复述 JavaScript 基础回顾要点，包括三种输出方式、变量创建与命名规范、typeof 的作用及 5 种原始类型。
能使用第三方变量完成两个变量值的交换，并解释为什么不能直接互相赋值。
能根据规则判断并写出字符串转 number 的结果，包括纯数字字符串、空字符串、两端空格处理及无法转换时返回 NaN。
能准确判断 boolean、null、undefined 转 number 的结果，并说明 true/false、null/undefined 分别对应的数值。
能说明其他类型转 string 时“原样变为字符串内容”的规则，并正确写出数字、布尔、null、undefined 的转换结果。
能依据“有内容为 true、空内容为 false”的规则判断其他类型转 boolean 的结果，并正确列出数字和字符串中的假值情况。

知识点

回顾：语句、注释与三种输出

本节笔记没有附图；以下代码依据转写稿中的课堂示例整理。
为什么需要：JS 代码要能被浏览器正确解析，也要方便调试。怎么想：先守住书写规则，再记住输出位置。怎么做：语句一般用分号结束，换行主要是可读性；JS 严格区分大小写；注释有单行 // 和多行 /* */。三种输出分别是弹框、页面文档流、控制台。易错点：alert 不要写成 aler；document.write 不要写成“document 下点 Right”；console.log 不要写成“康 for 点烙子”。这些输出多用于调试，真正面向用户的程序通常会把结果放到页面指定位置，后续会接触 DOM。

alert("提示");
document.write("输出到页面");
console.log("输出到控制台");

变量与命名规范

为什么需要：变量用来保存数据，后续才能反复使用和修改。怎么想：先区分“创建变量”和“创建时赋值”，再区分“创建了没赋值”和“压根没创建”。怎么做：课堂口述的变量关键字按 var 理解，示例用 let 演示同样逻辑；可以只声明，也可以声明同时赋值。命名有两条强制规范：不能用关键字；只能由数字、字母、下划线、$ 组成，且不能数字开头。推荐规范是有意义单词、多个单词用小驼峰。易错点：创建了变量但不赋值，使用时得到 undefined；变量没创建就使用会报错，这两件事完全不同。

let a = 100;
let b = 200;
let c;
console.log(c); // undefined

数据类型判断与五种原始类型

为什么需要：不同类型能做的操作不同，判断类型是调试和转换的前提。怎么想：先用 typeof 看类型，再逐个记原始类型。怎么做：typeof(数据) 得到类型结果；原始类型有 number、string、boolean、null、undefined。易错点：typeof 在新标准中归为运算符，不要和普通函数混为一谈；类型名要写准。

console.log(typeof 123); // "number"
console.log(typeof "abc"); // "string"

number：整数、浮点、NaN 与范围

为什么需要：数值计算是最常见的数据处理。怎么想：整数和浮点在 JS 表面不严格区分，但内部计算有差异；小数转二进制可能不精确。怎么做：整数可用十进制、八进制、十六进制表示；浮点要注意精度；特别大或小的数可用科学计数法。NaN 是无效数字，不能参与正常计算，且 NaN 不等于自身；isNaN() 判断“是不是 NaN”，但它会先做类型转换。isFinite() 判断是否有效数字，超出范围会出现 Infinity、-Infinity；小于最小正数会变成 0。易错点：NaN 与任何数计算仍是 NaN；isNaN("abc") 为 true，因为字符串先转 number 失败。

console.log(0xAB); // 171
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(NaN === NaN); // false
console.log(isNaN("abc")); // true
console.log(isFinite(Infinity)); // false

string、boolean、null 与 undefined

为什么需要：字符串保存文本，布尔表示真假，空值表示“没有”。怎么想：字符串重点是引号和转义；布尔只有两个值；null 和 undefined 都表示空状态，但来源不同。怎么做：字符串可用单引号或双引号，不要互相乱套；内容需要换行用 \n，需要引号用 \' 或 \"，反斜杠本身用 \`，也可写 \x十六进制编码。布尔只有true、false。变量声明未赋值得到 undefined。易错点：字符串里的换行不能直接乱写；isNaN、isFinite` 的结果本身就是布尔值。

console.log("第一行\n第二行");
console.log("他说：\"你好\"");
console.log(true, false);

交换两个变量的值

为什么需要：这是变量赋值的经典练习，能暴露“覆盖原值”的问题。怎么想：如果直接 a = b; b = a;，第一次执行后 a 已变成 b 的值，原来的 a 找不到了。怎么做：引入第三方变量暂存。易错点：不能一上来就让两个变量互等；暂存顺序不能乱。

let a = 100, b = 200, t;
t = a;
a = b;
b = t;
console.log(a, b); // 200 100

字符串值同样可以交换：let a = "高乐", b = "曹操"; 仍用第三方变量即可。

其他类型转 number

为什么需要：表单、计算、判断都可能需要把其他类型变成数字。怎么想：转换函数名就是 Number，首字母大写；参数写在小括号里，整体结果是一个 number。怎么做：字符串转 number 时，纯数字字符串转对应数字；空字符串转 0；转之前会去掉两端所有空格，去掉后是空串则转 0；中间有空格则 NaN；0xAB 按十六进制得 171；045 得 45；科学计数法如 1e3 得 1000；其他普通字符串多为 NaN。布尔转 number：true 为 1，false 为 0。null 为 0，undefined 为 NaN。易错点：Number("hello") 是 NaN；Number(" ") 是 0；Number("213 32") 是 NaN。

console.log(Number("45.67")); // 45.67
console.log(Number("hello")); // NaN
console.log(Number("")); // 0
console.log(Number("  213.32  ")); // 213.32
console.log(Number("213 32")); // NaN
console.log(Number("0xAB")); // 171
console.log(Number(true), Number(false)); // 1 0
console.log(Number(null), Number(undefined)); // 0 NaN

其他类型转 string 与 boolean

为什么需要：输出、拼接、条件判断都需要类型转换。怎么想：转字符串用 String()，基本是“原来长什么样，转完内容就什么样”；转布尔用 Boolean()，核心看“有没有内容”。怎么做：String(12.23) 得 "12.23"，String(true) 得 "true"，String(null) 得 "null"，String(undefined) 得 "undefined"。转布尔时，number 中只有 0 和 NaN 为 false，其他数字包括正负无穷都为 true；字符串只有空串 "" 为 false，其他字符串包括 "false"、空格串都为 true；null、undefined 都为 false。易错点：Boolean("false") 是 true；Boolean(" ") 也是 true，因为转布尔不会像转 number 那样去两端空格。

console.log(String(12.23)); // "12.23"
console.log(String(true)); // "true"
console.log(Boolean(0), Boolean(NaN)); // false false
console.log(Boolean(-1), Boolean(Infinity)); // true true
console.log(Boolean(""), Boolean("false"), Boolean(" ")); // false true true
console.log(Boolean(null), Boolean(undefined)); // false false

本节回顾清单

text

1. 在HTML中使用JS
2. JS基本语法
   语句结束符是分号或者换行
   严格区分大小写
   注释： 多行 单行
   输出内容： alert()、document.write()、console.log()
3. 变量
   变量的语法 
   变量名的命名规范
3. 数据类型
   3.1 typeof()
   3.2 number: 整型、浮点型、科学家计数法、NaN、有效范围
   3.3 string: 单引号或双引号、转义字符
   3.4 boolean
   2.5 null 和 undefined

在HTML中使用JS：先让脚本跑起来

为什么需要：JS不能凭空运行，必须放进HTML文档，由浏览器解析执行。怎么想：先确认“脚本写在哪、什么时候执行”。怎么做：用<script>标签写内联代码，或用src引入外部JS文件；初学阶段把脚本放在页面底部或使用外部文件，避免操作页面元素时元素还没生成。易错点：外链<script src="...">标签中间不要再写代码；src路径写错时控制台会报404，不要先怀疑语法。

基本语法：分号、大小写、注释与输出

为什么需要：语法规则决定代码能否被正确解析，输出方式决定你如何观察结果。怎么想：语句结束用分号或换行，但换行是代码可读性的基础，建议写分号；JS严格区分大小写，Number和number不是一回事。怎么做：单行注释用//，多行注释用/* */；输出用alert()弹框、document.write()写入文档流、console.log()输出到控制台。调试时优先用console.log()，按F12看控制台。易错点：document.write()会把内容写进页面，不适合日常调试；alert()会阻塞页面；注释只注释符号后面的内容，//前面的代码仍会执行。

变量：先声明再使用，分清“没赋值”和“没创建”

为什么需要：变量用来保存数据，后续计算、输出都依赖它。怎么想：先问“变量存在吗、有没有值”。怎么做：用声明关键字创建变量，可以只声明，也可以声明同时赋值；命名强制规则是：不能用关键字，只能由数字、字母、下划线、$组成，不能数字开头；推荐用有意义的单词，多个单词用小驼峰。易错点：声明了但没赋值，使用时得到undefined；压根没声明就使用会报ReferenceError。这两种情况完全不同，转写稿特意强调过：一个是“有变量没值”，一个是“变量还不存在”。

数据类型判断：先用typeof看清类型

为什么需要：同样的内容，类型不同行为就不同，例如数字45.67和字符串"45.67"。怎么想：先判断类型，再决定能不能计算。怎么做：把要判断的数据放进typeof()，得到类型字符串。易错点：不要靠“看起来像”判断；控制台里字符串通常显示为黑色、数字为蓝色，但颜色只是辅助，最终以typeof结果为准。

number：整数、小数、科学计数法、NaN与范围

为什么需要：数值是最常见的数据，但JS的数值有精度和边界。怎么想：整数和小数在JS表面都归为number，但小数转二进制可能出现精度问题；特别大或特别小的数可用科学计数法。怎么做：用typeof确认类型；用isNaN()判断是否为NaN，用isFinite()判断是否为有限数。NaN是无效数字，和任何数计算结果仍是NaN，且NaN !== NaN；超出范围会出现Infinity或-Infinity。易错点：isNaN()会先把参数转成number再判断，其他类型转换后续会细讲；NaN不是“某个数字”，不能拿它正常比较。

string：单引号、双引号与转义字符

为什么需要：文本内容必须用字符串保存。怎么想：单引号和双引号都能表示字符串，关键是不要互相乱套。怎么做：字符串内容需要换行时不能直接敲换行，要用\n；需要输出引号本身时用\'、\"；反斜杠本身用\`；也可用\x`加十六进制编码表示字符。易错点：JS里直接换行可能被当成语句结束，字符串中要换行必须转义；转义字符写错会破坏字符串结构。

boolean、null与undefined：状态值和空值

为什么需要：程序经常要表示“真/假”和“空”。怎么想：boolean只有true、false；null和undefined都表示“没有”，但来源不同。怎么做：判断类函数如isNaN()、isFinite()的结果就是布尔值；变量声明未赋值时自动得到undefined。易错点：不要把null、undefined和字符串"null"、"undefined"混为一谈；它们的具体使用场景会随后续学习逐步展开，现在先牢记五种原始类型：number、string、boolean、null、undefined。

课堂画面

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例

示例一：交换两个变量的值（第三方变量）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交换两个变量的值</title>
</head>
<body>
<script>
  var a = 100;
  var b = 200;

  // 引入第三方变量，先把 a 的值存起来
  var c = a;
  a = b;
  b = c;

  console.log(a, b); // 200 100

  // 换成字符串也一样通用
  var x = '高乐高';
  var y = '曹操';
  var z = x;
  x = y;
  y = z;

  console.log(x, y); // 曹操 高乐高
</script>
</body>
</html>

关键行与易错点

var c = a; 先把 a 原来的值备份到第三方变量里，这是整个逻辑的核心（两个杯子倒饮料，必须再找一个空杯子）。
易错写法：a = b; b = a; —— 第一句执行完 a 已经变成 200，b 再赋给 a 时 a 原来的 100 已经找不到了，结果两个都是 200。
变量名只是示例，实际开发中不推荐 a、b、c 这种无意义命名，要用有意义的词、多个单词用小驼峰。
这个套路和数据类型无关，数字换成字符串照样能互换。

示例二：其他类型转 number（重点：string 转 number）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>其他类型转 number</title>
</head>
<body>
<script>
  var msg = 'hello高乐';
  var n1 = Number(msg);
  console.log(n1);          // NaN
  console.log(typeof n1);   // number

  // 纯数字字符串 → 对应的数字
  console.log(Number('45.67'));   // 45.67（蓝色=number）
  console.log('45.67');           // 45.67（黑色=string）
  console.log(Number('0xAB'));    // 171
  console.log(Number('045'));     // 45，不会当成八进制
  console.log(Number('2.3e3'));   // 2300，科学计数法形式也算纯数字
  console.log(Number('56abc'));   // NaN，不是纯数字

  // 两端空格会自动去掉，中间空格不会
  console.log(Number('  213.32  ')); // 213.32
  console.log(Number('213 32'));     // NaN

  // 空字符串 / 全是空格 → 0
  console.log(Number(''));       // 0
  console.log(Number('     '));  // 0

  // boolean、null、undefined
  console.log(Number(true), Number(false)); // 1 0
  console.log(Number(null));      // 0
  console.log(Number(undefined)); // NaN

  // 两个判断函数
  console.log(isNaN(NaN));         // true
  console.log(isFinite(Infinity)); // false
</script>
</body>
</html>

关键行与易错点

Number() 的 N 必须大写，JS 严格区分大小写，写成 number() 会报错。
小括号里的东西叫参数，Number(...) 整体的值就是一个 number 类型的数据，可以用变量存下来。
只有纯数字字符串（把引号去掉它本身就是个合法数字）才能转成有效数字；带任何杂质都变 NaN。
'0xAB'、'2.3e3' 看着"不像数字"，但内容本身是纯数字，所以能转；'045' 只按 45 处理，不会被当八进制。
最容易错的一条：转 number 前只去掉两端的空格，中间有空格照样 NaN；去掉两端后剩下空字符串时再按"空字符串 → 0"处理。
Number(null) 是 0，Number(undefined) 是 NaN —— 两个长得像，规则完全不同。
控制台里看颜色也能辅助判断：蓝色是 number，黑色是 string。

示例三：其他类型转 string / boolean

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>转 string 和 boolean</title>
</head>
<body>
<script>
  /* ---------- 转 string：长什么样，转完还是什么样 ---------- */
  var num = 12.23;
  console.log(num, typeof num);                  // 12.23 number
  console.log(String(num), typeof String(num));  // 12.23 string
  console.log(String(true), String(false));      // true false
  console.log(String(null), String(undefined));  // null undefined

  /* ---------- 转 boolean ---------- */
  // 数字：只有 0 和 NaN 是 false
  console.log(Boolean(12.23));                     // true
  console.log(Boolean(-5));                        // true
  console.log(Boolean(0));                         // false
  console.log(Boolean(NaN));                       // false
  console.log(Boolean(Infinity), Boolean(-Infinity)); // true true

  // 字符串：只有空字符串是 false
  console.log(Boolean('false')); // true，有内容就是 true
  console.log(Boolean(''));      // false
  console.log(Boolean('   '));   // true，转 boolean 不会去空格

  // null 和 undefined 都转 false
  console.log(Boolean(null), Boolean(undefined)); // false false
</script>
</body>
</html>

关键行与易错点

转 string 用 String()，规则最简单：原来的值直接变成字符串里的内容，12.23、true、null、undefined 都原样搬进去。
转 boolean 用 Boolean()，判断标准是"有没有内容"：数字里只有 0 和 NaN 是 false，正负无穷都是 true；字符串里只有空字符串是 false。
高频易错点：Boolean('false') 是 true，因为 false 只是字符串里的内容；Boolean(' ') 也是 true。
"去两端空格"只发生在转 number 时，转 boolean 不会去空格，别把两条规则混在一起记。
null 和 undefined 都转 false；而且它们不需要转成什么，也没有 Null()、Undefined() 这种转换函数。

常见错误

交换两个变量后两个值变成一样 现象：a = b; b = a; 之后 a 和 b 都等于原来的 b，原 a 的值丢失。原因：第一条赋值执行完，a 的旧值已被覆盖，无处可取。修法：先备份再覆盖——var t = a; a = b; b = t;，且顺序不能调换。
把 Number('') 和 Number(' ') 当成 NaN 现象：以为空字符串/纯空格字符串转数字会失败，结果得到 0；但 Number('1 2') 又是 NaN，感觉自相矛盾。原因：转 number 前只去掉两端空格，去掉后剩下空字符串就按 '' → 0 处理；中间的空格不会被去掉，'1 2' 不是纯数字。修法：判断前先在心里"去两端空格"，再去对照规则；不确定就 console.log 跑一次。
Number('0x1f')、Number('045') 结果与预期不符 现象：以为带字母或 0 开头会变 NaN，实际分别得到 31 和 45。原因：字符串转 number 只认"去掉引号后本身就是一个合法数字字面量"的情况，0x1f 是十六进制字面量，045 在字面量里并不表示八进制。修法：不要死记特例，统一用"去掉引号还像不像一个数字"来检验；真要做进制转换用 parseInt(str, radix)，别依赖 Number()。
isNaN('abc') 与 isNaN('123') 结果让人误判类型 现象：isNaN('abc') 为 true，但 isNaN('123') 为 false，于是认为 '123' 就是 number 类型。原因：isNaN 会先把参数隐式转成 number 再判断，字符串 '123' 能被转成有效数字。修法：要判断类型用 typeof x === 'number'；要判断"是不是 NaN"用 Number.isNaN(x)，别用 isNaN 兼做类型检查。
Boolean('false') 得到 true 现象：以为字符串 'false' 转布尔是 false。原因：字符串转布尔只看"有没有内容"，'false' 是有内容的字符串，非空即 true；只有 '' 才是 false。修法：牢记只有 '' （真空串）为假，' '（含空格）也是 true——这条和 number 的去空格规则不同，不要混用。
函数名大小写写错导致 xxx is not defined 现象：写 number('12')、boolean(0)、string(1) 直接报错。原因：JS 严格区分大小写，内置包装函数是 Number / String / Boolean。修法：转换函数一律首字母大写；报 is not defined 时先检查拼写和大小写。
用 === 或 == 判断 NaN 现象：x === NaN 永远是 false，明明 x 打印出来就是 NaN。原因：NaN 与任何值（包括自己）都不相等。修法：用 Number.isNaN(x) 或 isNaN(x) 判断。
Number(null) 与 Number(undefined) 混为一谈 现象：以为两者都转成 NaN，或都转成 0。原因：null 被视为"空值"转 0，undefined 是"未定义"转 NaN，作者设计如此。修法：这两条单独记成一对：null → 0，undefined → NaN；同理 Boolean 里两者都是 false，别互相套用。

练习

三变量轮换：有 a=1, b=2, c=3，只用最少的临时变量让它们变成 a=2, b=3, c=1。写完后用 console.log 验证，并说明为什么不能写成 a=b; b=c; c=a;。

预测输出：不运行代码，先写出下列每行的结果和类型，再运行对照，把预测错的记下来。

console.log(Number(''), Number('  '), Number(' 12 '), Number('1 2'));
console.log(Number('0x10'), Number('010'), Number('1e3'), Number('12px'));
console.log(Number(true), Number(false), Number(null), Number(undefined));
console.log(Boolean(''), Boolean(' '), Boolean('0'), Boolean(0), Boolean(NaN));
console.log(String(12.5), String(null), String(undefined), String(true));

写一个 toNum 函数：接收任意值，返回 { ok: true, value: 数字 } 或 { ok: false }。要求：null、undefined、NaN、'12px'、'1 2' 都算失败；' 12 '、'0x10'、true、'' 算成功。写完用第 2 题的数据跑一遍。
表单清洗：假设从输入框拿到三个字符串 ' 88 '、' '、'abc'，请分别转成 number，并把转不成有效数字的那一项标记为"非法输入"，输出清洗后的结果。思考：为什么不能直接用 if (!num) 判断非法？

纠错题：下面代码想实现"交换 x、y 并判断结果是否为数字"，找出全部错误并改正。

var x = '100', y = '200';
x = y; y = x;
console.log(number(x) + number(y));
if (isNaN(x) == false) &#123; console.log('是数字'); &#125;

原视频对照

#	视频	时长
1	回顾	12:11
2	交换两个变量的值	03:12
3	其他类型转number-string转number	18:30
4	其他类型转number02	03:30
5	其他类型转为string	03:52
6	其他类型转为boolean	07:57

小结

交换变量必须借助第三方临时变量，"先备份、再覆盖、后回填"三步顺序不可颠倒；这条逻辑与数据类型无关，字符串、对象同样适用。
Number() / String() / Boolean() 是三个转换函数，函数名首字母大写；参数写在小括号里，整体结果就是转换后的值，可直接赋给变量或直接输出。
字符串转 number 的核心只有一句话：去掉两端空格后，剩下的内容如果去掉引号本身就是一个合法数字，就转成对应数字；是空字符串就转成 0；其他一律 NaN。所有特例（'0x1f'、'1e3'、'045'）都服从这条总规则。
只有"字符串转 number"会去两端空格；转 boolean 时不去，所以 ' ' 是 true、'' 才是 false。
转 boolean 的假值只有固定几个：0、NaN、''、null、undefined（以及 false 本身）；其余全部为 true，包括负数、Infinity、'false'、'0'。
转 string 没有规则可言，原样变成字符串内容即可，是三类转换里最省心的一个。
null 和 undefined 没有"转成它们"的需求，也不存在对应函数；只需记住它们转 number 分别是 0 和 NaN、转 boolean 都是 false。
这些规则是人为约定而非推导出来的，记混很正常——写代码时先跑一次看结果，用结果校正记忆，比死背表格有效得多。

交换两个变量的值与其他类型转number-string转nu（Day2 1/4） ​

学习目标 ​

知识点 ​

回顾：语句、注释与三种输出 ​

变量与命名规范 ​

数据类型判断与五种原始类型 ​

number：整数、浮点、NaN 与范围 ​

string、boolean、null 与 undefined ​

交换两个变量的值 ​

其他类型转 number ​

其他类型转 string 与 boolean ​

本节回顾清单 ​

在HTML中使用JS：先让脚本跑起来 ​

基本语法：分号、大小写、注释与输出 ​

变量：先声明再使用，分清“没赋值”和“没创建” ​

数据类型判断：先用typeof看清类型 ​

number：整数、小数、科学计数法、NaN与范围 ​

string：单引号、双引号与转义字符 ​

boolean、null与undefined：状态值和空值 ​

课堂画面 ​

代码示例 ​

示例一：交换两个变量的值（第三方变量） ​

示例二：其他类型转 number（重点：string 转 number） ​

示例三：其他类型转 string / boolean ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

交换两个变量的值与其他类型转number-string转nu（Day2 1/4）

学习目标

知识点

回顾：语句、注释与三种输出

变量与命名规范

数据类型判断与五种原始类型

number：整数、浮点、NaN 与范围

string、boolean、null 与 undefined

交换两个变量的值

其他类型转 number

其他类型转 string 与 boolean

本节回顾清单

在HTML中使用JS：先让脚本跑起来

基本语法：分号、大小写、注释与输出

变量：先声明再使用，分清“没赋值”和“没创建”

数据类型判断：先用typeof看清类型

number：整数、小数、科学计数法、NaN与范围

string：单引号、双引号与转义字符

boolean、null与undefined：状态值和空值

课堂画面

代码示例

示例一：交换两个变量的值（第三方变量）

示例二：其他类型转 number（重点：string 转 number）

示例三：其他类型转 string / boolean

常见错误

练习

原视频对照

小结