← 返回目录

5. typeof 与类型转换

怎么知道一个箱子里装的是数字还是文字?怎么把文字变数字?本页解决认类型换类型两件事。

5.1 互动演示

输入 "3.14"、"3.14abc"、"abc" 分别点上面按钮,对比差异。

5.2 知识点逐条讲解(配合代码)

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

有时候你不确定箱子里装的是数字还是文字,就用 typeof 变量名 问它一句,它会"递出"一个类型的名字(这个动作叫"返回",就是把结果交出来)。

let num = 10;                  // 装个数字 10
console.log(typeof num);    // 问它类型,答 "number"(数字)
let str = '10';                // 装一段文字 10(带引号,是字符串)
console.log(typeof str);   // 问它类型,答 "string"(字符串)
let bool = true;               // 布尔值,只有 true/false 两种
console.log(typeof bool);  // 答 "boolean"(布尔)
let undef;                     // 只要箱子,没放东西
console.log(typeof undef); // 答 "undefined"
let empty = null;              // 你主动把箱子设成空
console.log(typeof empty); // 答 "object"  ← 注意!这是个 bug
		

如果你看到 typeof null 答 "object" 觉得自己写错了,其实没写错——这是 JS 第一版留下的历史 bug,全世界都知道,但改它会让无数老网站崩掉,所以一直留着。判断是不是 null,得单独写 x === null

② 把数字变成文字:三种办法

有时候你需要把数字"123"变成能拼进句子的文字。有三种常用办法:

办法怎么写感觉
String()String(num)主动喊它变
toString()num.toString()主动喊它变
加个空字符串num + ''浏览器偷偷帮你变
let n = 123;            // 现在是数字
console.log(String(n)); // "123" → 变成文字了
console.log(n.toString()); // "123"
console.log(n + '');   // "123" → 一加空文字,整体就成文字了
		

③ 把文字变成数字:Number / parseInt / parseFloat

从输入框拿到的都是文字(比如 "3.14"),要算数就得先变数字。三个工具性格不一样:

工具性格"3.14abc" 转出来
Number()较真:整个必须是合法数字,有一点杂质就转成 NaN(算不出来)NaN
parseInt()捞整数:从左往右捞,碰到非数字就停3
parseFloat()捞小数:从左往右捞,能带小数点3.14
Number("3.14");        // 3.14
Number("3.14abc");     // NaN(里面有 abc,较真的它不干)
parseInt("3.14abc");   // 3(只捞开头的整数)
parseFloat("3.14abc"); // 3.14(把开头的小数也捞出来)
Number("abc");         // NaN
		

如果 Number('123abc') 和 parseInt('123abc') 你以为结果一样,其实不一样:Number 较真是 NaNparseInt 会"捞"出 123。这是自测题里的高频题,记住"Number 较真、parse 能捞"。

实战:用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用:校验用户输入是不是数字;把表单里的字符串转成数字再计算。

② 常见的问题:Number('123abc') 得到 NaN 还接着算;或者看到 typeof null 是 object 以为自己写错了。

③ 解决思路:转完用 isNaN() 检查一下是不是 NaN;判空值要单独写 === null,别只靠 typeof

一句话记住:typeof 用来问类型;typeof null 答 object 是历史 bug,判 null 要写 === null;转文字用 String()/toString()/+'';转数字 Number 较真、parseInt 捞整、parseFloat 捞小数