大多数情况下,运算符和函数会将值自动转换为正确的类型。

比如,alert 会自动将任何值转换为字符串。算术运算符会将值转换为数字。

还有些例子,需要显式进行类型转换,以得到正确的结果。

对象还未纳入讨论中

本章并不会讨论 object 类型。先学习原始类型,之后我们会学习 object 类型。对象的类型转换在章节 对象原始值转换 介绍。

ToString

当需要一个值的字符串形式,就会进行 string 类型转换。

比如,alert(value)value 转换为 string 类型,然后显示这个值。

也可以显式地调用 String(value) 来达到这一目的:

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

value = String(value); // 现在,值是一个字符串形式的 "true"
alert(typeof value); // string

转换为 string 类型的值往往是可预见的。false 变成 "false"null 变成 "null" 等。

ToNumber

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

比如,当使用 / 用于非 number 类型:

alert( "6" / "2" ); // 3, string 类型的值被转换成 number

也可以使用 Number(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。如果字符串不是纯数字,则返回 NaN

例如:

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN (error reading a number at "z")
alert( Number(true) );        // 1
alert( Number(false) );       // 0

请注意 nullundefined 有点不同。null 变成数字 0undefined 变成 NaN

加号’+’ 连接字符串

几乎所有的算术运算符都将值转换为数字,加号 + 是个例外。如果其中一个运算元是字符串,则另一个也会转换为字符串。

然后,连接两者:

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

这仅仅发生在其中一方为字符串(译者注:或者双方都为字符串)的情况下。其他情况下会被转换为数字。

ToBoolean

转换为 boolean 类型是最为简单的一个。

逻辑操作(之后我们会了解到条件判断和其他类似的东西)或显式调用 Boolean(value) 会触发 boolean 类型转换。

转换规则如下:

  • 假值,比如 0、空的字符串、nullundefinedNaN 变成 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 类型。

ToString —— 输出内容时转换发生,或通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的。

ToNumber —— 进行算术操作时转换发生,或通过 Number(value) 进行显式转换。

ToNumber 转换遵循以下规则:

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

ToBoolean —— 进行逻辑操作时转换发生。或通过 Boolean(value) 进行显式转换。

ToBoolean 遵循以下规则:

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

上述的大多数规则都容易理解和记忆。经常犯错的例外有:

  • undefined 进行 ToNumber 时变成 NaN,而非 0
  • "0" 和只有空格的字符串(比如:" " )在进行 boolean 转换时变成 true

对象的转换并未在此提及。我们会在专门介绍对象的章节 对象原始值转换 中介绍,随后我们会学习 JavaScript 更多基础的细节。

任务

重要程度: 5

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

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

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

"" + 1 + 0 = "10" // (1)
"" - 1 + 0 = -1 // (2)
true + false = 1
6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
7 / 0 = Infinity
" -9\n" + 5 = " -9\n5"
" -9\n" - 5 = -14
null + 1 = 1 // (3)
undefined + 1 = NaN // (4)
  1. 字符串的加法 "" + 1 会将 1 转换为一个字符串:"" + 1 = "1",然后我们得到了 "1" + 0,再次应用同样的规则。
  2. 减法 - (就像大多数数学操作那样)只能用于数字,它会将空字符串 "" 转换为 0
  3. null 经过数字化转换之后会变为 0
  4. undefined 经过数字化转换之后会变为 NaN
教程路线图

评论

在评论之前先阅读本内容…
  • 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
  • 使用 <code> 标签插入几行代码,对于多行代码 — 可以使用 <pre>,对于超过十行的代码 — 建议使用沙箱(plnkrJSBincodepen 等)。
  • 如果你无法理解文章中的内容 — 请详细说明。