现代 JavaScript 原始类型转换你真的学会了吗？

类型转换

大多数状况下，运算符和函数会自动将赋予他们的值转换为正确的类型。

好比，alert 会自动将任何值都转换为字符串以进行显示。算术运算符会将值转换为数字。

在某些状况下，咱们须要将值显式地转换为咱们指望的类型。

对象还未归入讨论中

本章不会讨论 object 类型。先学习原始类型，以后咱们会学习 object 类型。咱们会在 info:object-toprimitive 一节中学习对象的类型转换。

字符串转换

当咱们须要一个字符串形式的值时，就会进行字符串转换。

好比，alert(value) 将 value 转换为字符串类型，而后显示这个值。

咱们也能够显式地调用 String(value) 来将 value 转换为字符串类型：

let value = true;
alert(typeof value); // boolean

value = String(value); // 如今，值是一个字符串形式的 "true"
alert(typeof value); // string
复制代码

字符串转换最明显。false 变成 "false"，null 变成 "null" 等。

数字型转换

在算术函数和表达式中，会自动进行 number 类型转换。

好比，当把除法 / 用于非 number 类型：

alert( "6" / "2" ); // 3, string 类型的值被自动转换成 number 类型后进行计算
复制代码

咱们也可使用 Number(value) 显式地将这个 value 转换为 number 类型。

let str = "123";
alert(typeof str); // string

let num = Number(str); // 变成 number 类型 123

alert(typeof num); // number
复制代码

当咱们从 string 类型源（如文本表单）中读取一个值，但指望输入一个数字时，一般须要进行显式转换。

若是该字符串不是一个有效的数字，转换的结果会是 NaN。例如：

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN，转换失败
复制代码

number 类型转换规则：

值	变成……
undefined	NaN
null	0
true 和 false	1 and 0
string	去掉首尾空格后的纯数字字符串中含有的数字。若是剩余字符串为空，则转换结果为 0。不然，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

译注：字符串转换为 number 类型时，除了 undefined、null 和 boolean 三种特殊状况，只有字符串是由空格和数字组成时，才能转换成功，不然会出现 error 返回 NaN。

例子：

alert( Number(" 123 ") ); // 123
alert( Number("123z") );      // NaN（从字符串“读取”数字，读到 "z" 时出现错误）
alert( Number(true) );        // 1
alert( Number(false) );       // 0
复制代码

请注意 null 和 undefined 在这有点不一样：null 变成数字 0，undefined 变成 NaN。

加号 '+' 链接字符串

几乎全部的算术运算符都将值转换为数字进行运算，加号 + 是个例外。若是其中一个运算元是字符串，则另外一个也会被转换为字符串。

而后，将二者链接在一块儿：

alert( 1 + '2' ); // '12' (字符串在加号右边)
alert( '1' + 2 ); // '12' (字符串在加号左边)
复制代码

这仅仅发生在至少其中一方为字符串的状况下。不然值会被转换为数字。

布尔型转换

布尔（boolean）类型转换是最简单的一个。

它发生在逻辑运算中（稍后咱们将进行条件判断和其余相似的东西），可是也能够经过调用 Boolean(value) 显式地进行转换。

转换规则以下：

• 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
• 其余值变成 true。

好比：

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
复制代码

请注意：包含 0 的字符串 "0" 是 true

一些编程语言（好比 PHP）视 "0" 为 false。但在 JavaScript 中，非空的字符串老是 true。

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
复制代码

总结

有三种经常使用的类型转换：转换为 string 类型、转换为 number 类型和转换为 boolean 类型。

字符串转换 —— 转换发生在输出内容的时候，也能够经过 String(value) 进行显式转换。原始类型值的 string 类型转换一般是很明显的。

数字型转换 —— 转换发生在进行算术操做时，也能够经过 Number(value) 进行显式转换。

数字型转换遵循如下规则：

值	变成……
undefined	NaN
null	0
true / false	1 / 0
string	“按原样读取”字符串，两端的空白会被忽略。空字符串变成 0。转换出错则输出 NaN。

布尔型转换 —— 转换发生在进行逻辑操做时，也能够经过 Boolean(value) 进行显式转换。

布尔型转换遵循如下规则：

值	变成……
0, null, undefined, NaN, ""	false
其余值	true

上述的大多数规则都容易理解和记忆。人们一般会犯错误的值得注意的例子有如下几个：

• 对 undefined 进行数字型转换时，输出结果为 NaN，而非 0。
• 对 "0" 和只有空格的字符串（好比：" "）进行布尔型转换时，输出结果为 true。

咱们在本小结没有讲 object 类型的转换。在咱们学习完更多关于 JavaScript 的基本知识后，咱们会在专门介绍 object 的章节 对象原始值转换 中详细讲解 object 类型转换。

做业题

先本身作题目再看答案。

类型转换

重要程度：⭐️⭐️⭐️⭐️⭐️

下面这些表达式的结果是什么？

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
" -9 " + 5
" -9 " - 5
null + 1
undefined + 1
" \t \n" - 2
复制代码

好好思考一下，把它们写下来而后和答案比较一下。

答案：

在微信公众号「技术漫谈」后台回复 1-2-6 获取本题答案。

---

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程。

在线免费阅读：zh.javascript.info

---

扫描下方二维码，关注微信公众号「技术漫谈」，订阅更多精彩内容。