企业官网建设流程全解析

点此查看所有教程、项目、源码导航

1. 前言

前面我们已经认识了 JS 里几个简单数据类型：数字、字符串、布尔、undefined。
在实际写代码的时候，我们经常会遇到两个需求：第一，我怎么知道当前这个变量到底是什么类型；第二，不同类型的数据之间，有时候需要互相转成别的类型来参与计算或者判断。
本篇我们就来学习简单类型的检测，以及常用的类型转换。

2. typeof 类型检测

想要查看简单数据是什么类型，JS 给我们提供了typeof运算符，这也是检测简单类型最常用的方式。
它的使用方式有两种：typeof 变量或者typeof(变量)，效果是一样的。

下面这段代码，依次检测我们前面学过的几种简单类型。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>typeof测试</title></head><body><script>letnum=100;letstr='你好';letflag=true;letun;console.log(typeofnum);console.log(typeofstr);console.log(typeofflag);console.log(typeofun);</script></body></html>

打开浏览器控制台可以看到输出结果：

• typeof 100→number
• typeof '你好'→string
• typeof true→boolean
• typeof undefined→undefined

重点说明：typeof 非常适合用来检测简单类型。但是它有局限性，后面我们学到引用类型的时候就会发现，typeof 在部分场景下判断并不准确。现阶段我们只需要记住，它用来检测这几个简单类型是够用的。

3. 隐式类型转换

隐式转换，就是代码在运行的时候，浏览器自动帮我们完成的类型转换，我们没有手动调用转换方法。这种情况在加号、减号、比较运算里很常见。

先看加号的场景，加号有两个身份：数字加法、字符串拼接。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"></head><body><script>console.log(10+20);console.log(10+'20');</script></body></html>

代码解释：

1. 10 + 20，两边都是数字，执行数学加法，结果 30。
2. 10 + '20'，一边是数字，一边是字符串，加号会优先当成拼接，自动把数字转为字符串，结果是字符串"1020"。

再看减号、乘号、除号，它们没有拼接功能，遇到字符串会尝试把字符串转成数字再计算。

<script>console.log(100-'20');console.log(100-'abc');</script>

输出：

• 100 - '20'→ 80，字符串'20'自动转成数字 20
• 100 - 'abc'→ NaN，abc没法转为有效数字，得到非数字

还有布尔的隐式转换，在 if 判断、逻辑运算里，很多值会自动转成 true 或者 false。
JS 里这几个值会被当成假：0、''空字符串、undefined、NaN；其余大部分值都会当成真。

4. 显式类型转换

显式转换就是我们主动调用方法，强制把数据转为我们想要的类型，可控性更强，开发里更推荐使用。
这里介绍三个最常用的：转数字、转字符串、转布尔。

4.1 转为数字 Number ()

<script>leta='666';letb=Number(a);console.log(b,typeofb);letc='666abc';letd=Number(c);console.log(d);</script>

说明：
Number 会整体去转换，如果整个字符串不是合法数字，直接返回 NaN。

补充另外两个转数字的函数：parseInt()、parseFloat()

• parseInt：从左往右读取，读到不能转数字就停下，只取整数部分
• parseFloat：和 parseInt 类似，但是可以读取小数

<script>console.log(parseInt('12.34abc'));console.log(parseFloat('12.34abc'));</script>

4.2 转为字符串 String ()

<script>letnum=999;lets=String(num);console.log(s,typeofs);</script>

任何简单类型丢给 String，都可以稳定转为对应的文本形式，不会报错。
还有一个简写方式：变量 +''，原理也是转为字符串，属于隐式转换。

4.3 转为布尔 Boolean ()

<script>console.log(Boolean(0));console.log(Boolean(''));console.log(Boolean(100));console.log(Boolean('hello'));</script>

和隐式转换规则保持一致：空值、0、undefined、NaN 转为 false，其余为 true。

5. 小结

1. typeof是检测简单类型的首选方式，可以快速拿到数据类型字符串。
2. 隐式转换是浏览器自动执行，好处是写代码省事，但很容易出现意料之外的 bug。
3. 显式转换Number/String/Boolean是我们主动控制类型，业务代码优先使用，可读性更好。
4. 转换的时候一定要区分：整体转换 Number，和截取数字的 parseInt、parseFloat，它们行为不一样。

后面我们学习引用类型的时候，还会讲到更完善的类型检测方案，到时候再对比学习。