【JavaScript 漫游】【007】数据类型转换

文章简介

本文为【JavaScript 漫游】专栏的第 007 篇文章，对 JS 数据类型转化语法进行了简记。

数据类型的转换指的是将 JS 的某一数据类型的值转换为 JS 的某一原始数据类型的值，也就是 number、string 和 boolean。

1. Number 方法强制转换为 number 类型
2. String 方法强制转换为 string 类型
3. Boolean 方法强制转换为 boolean 类型
4. 自动转换为数值的场景
5. 自动转换为字符串的场景
6. 自动转换为布尔值的场景

Number 方法

Number(123);  // 123, 数值转换后还是原来的值
Number('123');  // 123，字符串如果可以解析为数值，转换为相应的数值
Number('123a');  // NaN，如果不可以解析为数值，就返回 NaN
Number('');  // 0，空字符串转为 0
Number(true);  // 1，布尔值 true 转为 1
Number(false);  // 0，布尔值 false 转为 0
Number(undefined);  // NaN
Number(null);  // 0
Number([5]);  // 5
Number({a: 1});  // NaN，对象除了包含单个数值的数组会转为数值，其他都是 NaN

Number 方法将字符串转为数值，要比 parseInt 方法要严格得多。基本上，只要有一个字符无法转为数值，整个字符串就会被转为 NaN。

parseInt('123a');  // 123
Number('123a');  // NaN

parseInt 是逐个字符解析，Number 是整体解析。

此外，它们的一个共同点就是都会自动过滤字符串前导或后缀的空格。

parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34

值得注意的是，Number 方法的参数是对象时，将返回 NaN，除非是包含单个数值的数组。背后的原因是，Number 背后的转换规则比较复杂。

第一步，调用对象自身的 valueOf 方法。如果返回的是原始类型的值，就对该值使用 Number 方法，不再进行后续步骤。

第二步，改为调用对象自身的 toString 方法。如果返回的是原始类型的值，就对该值使用 Number 方法，不再进行后续步骤。

第三步，如果toString 方法返回的是对象，就报错。

对象的 valueOf 方法和 toString 方法，笔者会在后续总结 Object 对象的静态方法和实例方法时进行说明。这里先暂时记录着其中的原理。

String 方法

String(123);  // '123'
String('123');  // '123'
String('true');  // 'true'
String(undefined);  // 'undefined'
String(null);  // 'null'
String([1, 2, 3]);  // '[1, 2, 3]'
String({a: 1});  // '[object Object]'

String 方法的参数如果是对象，返回一个类型字符串；如果是数组，就返回该数组的字符串形式。

背后的转换原理，与 Number 方法基本相同，只是调换了顺序。

第一步，调用对象自身的 toString 方法。如果返回的是原始类型的值，就对该值使用 String 方法，不再进行后续步骤。

第二步，改为调用对象自身的 valueOf 方法。如果返回的是原始类型的值，就对该值使用 String 方法，不再进行后续步骤。

第三步，如果valueOf 方法返回的是对象，就报错。

Boolean 方法

Boolean(1);  // true
Boolean(0);  // false
Boolean('hello, world');  // true
Boolean('');  // false
Boolean(undefined);  // false
Boolean(null);  // false
Boolean(true);  // true
Boolean(NaN);  // false
Boolean({});  // true
Boolean([]);  // true
Boolean(new Boolean(false));  // true

要注意的是，所有对象（包括空对象）的转换结果都是 true，甚至连 false 对应的布尔对象 new Boolean(false) 也是 true。

自动转换为数值的场景

JS 遇到预期为数值的地方，就会将参数值自动转换为数值。系统内部会自动调用 Number 方法。

除了 + 有可能把运算子转为字符串，其他运算符都会把运算子自动转为数值。

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

自动转换为字符串的场景

JS 遇到预期为字符串的地方，就会将参数值自动转换为字符串。具体规则是，先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串。

自动转换为字符串的场景，主要发生在字符串的加法运算符的时候。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

自动转换为布尔值的场景

JS 遇到预期为布尔值的地方（比如 if 语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用 Boolean 方法。

自动转换为布尔值的场景主要是 if 语句、逻辑运算符和三元运算符。