前端必会！Js数据类型转换超详解

JavaScript 的数据类型大致分为基本数据类型和复杂数据类型。基本数据类型有 7 种，分别是string（字符串）、number（数字）、boolean（布尔值）、null（空值）、undefined（未定义）、symbol（符号）和bigint（大整数）。复杂数据类型呢，最常见的就是object（对象），像function（函数）和array（数组）其实也都属于对象类型。接下来，咱们就详细聊聊这些数据类型之间是怎么相互转换的。

转换成字符串类型

在 JavaScript 中，把其他数据类型转换成字符串有好几种方法，每种方法都有自己的特点和适用场景。

使用toString()方法

console.log((123).toString()); // "123"
console.log(typeof (123).toString()); // "string"
console.log((123.45).toString()); // "123.45"
console.log((true).toString()); // "true"

这是很多数据类型都能使用的一种转换方法。对于数字而言，如(123).toString()，它会将数字123转换为字符串"123"，通过console.log(typeof (123).toString())可验证其类型变为"string" 。

对于带小数的数字(123.45).toString()，会返回"123.45" 。

布尔值(true).toString()则返回"true" 。

不过，null和undefined这两个特殊的值是没有toString()方法的，若尝试null.toString()或undefined.toString()，代码运行时就会抛出错误。 尝试对null和undefined使用toString()方法会报错，示例如下：

// null.toString(); // 报错
// undefined.toString(); // 报错

使用String()函数

console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(987)); // "987"
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String(123.45)); // "123.45"
console.log(String(false)); // "false"

String()函数功能更为强大，能处理null和undefined 。String(null)会返回"null" ，String(undefined)会返回"undefined" 。

对于数字String(987) ，返回"987" 。当处理数组String([1, 2, 3])时，会将数组元素用逗号连接，返回"1,2,3" 。

对于带小数的数字String(123.45)返回"123.45" ，布尔值String(false)返回"false" 。

所以，当不确定要转换的数据类型时，使用String()函数是个比较保险的选择。

利用+运算符

console.log("" + 10); // "10"
console.log("" + false); // "false"
console.log("" + null); // "null"

利用+运算符和空字符串""也能实现数据类型转换，在需要快速拼接字符串的场景中非常实用。

比如"" + 10 ，数字10会与空字符串拼接，从而转换为字符串"10" 。

"" + false会把布尔值false转换为字符串"false" ，"" + null则将null转换为字符串"null" 。这种方式简单直观，在代码中使用起来很便捷。

转换成数字类型

把其他类型的数据转换成数字在 JavaScript 中也是很常见的操作，同样有多种方法可供选择。

使用Number()函数

console.log(Number("123")); // 123
console.log(typeof Number("123")); // "number"
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number("123abc")); // NaN
console.log(Number("abc")); // NaN
console.log(Number("123.45abc")); // NaN

Number()函数可以将很多类型的数据转换为数字。

对于字符串"123" ，Number("123")会将其转换为数字123 ，通过console.log(typeof Number("123"))可确认其类型变为"number" 。

布尔值true通过Number(true)转换为数字1 ，false通过Number(false)转换为数字0 。

然而，Number()函数对字符串的格式要求比较严格，如果字符串中包含除了数字、正负号和小数点之外的其他字符，就会返回NaN 。

例如Number("123abc") 、Number("abc") 、Number("123.45abc") ，由于字符串中存在非数字字符，都会返回NaN ，表示这不是一个有效的数字。

使用parseInt()和parseFloat()函数

console.log(parseInt("123.45")); // 123
console.log(parseFloat("123.45")); // 123.45
console.log(parseInt("123abc")); // 123
console.log(parseFloat("123.45abc")); // 123.45
console.log(parseInt("0xf", 16)); // 15

parseInt()主要用于将字符串转换为整数，parseFloat()则用于将字符串转换为浮点数。

对于字符串"123.45" ，parseInt("123.45")会把小数部分直接舍去，返回整数123 ，而parseFloat("123.45")会返回完整的浮点数123.45 。

当字符串中存在非数字字符时，parseInt("123abc")读到a时就停止读取，返回123 ，parseFloat("123.45abc")读到a时停止读取，返回123.45 。

parseInt("0xf", 16)中，第二个参数16表示按照十六进制来解析字符串，会返回十进制的15 ，展示了parseInt()可以根据指定进制进行转换的功能。

算术运算符的隐式转换

console.log("5" - 2); // 3
console.log(true * 3); // 3
console.log(null - 1); // -1

在使用-、*、/等算术运算符时，JavaScript 会自动尝试将非数字类型的数据转换为数字。例如"5" - 2 ，字符串"5"会先被隐式转换为数字5 ，然后再和2进行减法运算，最终结果为3 。

布尔值true在true * 3中会被转换为数字1 ，所以结果为3 。null在null - 1中会被转换为数字0 ，结果为-1 。这种隐式转换在代码中很常见，但有时容易被忽略，需要特别注意。

转换成布尔类型

在 JavaScript 里，使用Boolean()函数可以把其他类型的数据转换成布尔值。这里有几个特殊的值在转换时会被当作false，我们把它们叫做 "假值"，分别是false、0、""（空字符串）、null、undefined和NaN 。除了这些假值，其他的数据转换成布尔值时都会是true 。

使用Boolean()函数进行显式转换

console.log(Boolean(1)); // true
console.log(Boolean("abc")); // true
console.log(Boolean(null)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(NaN)); // false

通过Boolean(1) ，因为1不是假值，所以返回true ；Boolean("abc") ，由于"abc"不是空字符串，返回true ；Boolean(null) ，null是假值，返回false ；

Boolean(0) ，0是假值，返回false ；Boolean("") ，空字符串是假值，返回false ；Boolean(NaN) ，NaN是假值，返回false 。这些示例清晰展示了假值与非假值的转换情况。

条件判断中的隐式转换

if ("abc") {
    console.log("条件为真"); // 条件为真
}
if (0) {
    console.log("这不会打印"); // 不打印
}
if (null) {
    console.log("这也不会打印"); // 不打印
}

在条件判断语句里，经常会隐式地进行布尔类型的转换。比如在if ("abc")中，"abc"会被隐式转换为true ，所以会打印出 "条件为真" 。

而在if (0)和if (null)中，0和null会被隐式转换为false ，所以对应的代码块不会执行。这种隐式转换在代码中很常见，我们在编写条件判断语句时，要清楚数据类型转换的规则，避免出现逻辑错误。

对象与基本类型的转换

在 JavaScript 中，对象和基本类型之间也可以相互转换，这在处理复杂数据时非常有用。

对象转换为基本类型

let o = {
    toString: function() {
        return "自定义的字符串";
    }
};
console.log(String(o)); // "自定义的字符串"
console.log(o + ""); // "自定义的字符串"
let oNoToString = {
    valueOf: function() {
        return 456;
    }
};
console.log(Number(oNoToString)); // 456
console.log(10 + oNoToString); // 466

对象在参与运算或者需要基本类型值的地方，会尝试转换为基本类型。一般来说，对象会先调用toString()方法，如果没有这个方法，就会调用valueOf()方法。

对于自定义了toString()方法的对象o ，String(o)和o + ""都会调用其toString()方法，返回"自定义的字符串" 。

对于没有toString()方法但有valueOf()方法的对象oNoToString ，Number(oNoToString)会调用其valueOf()方法，返回456 ，在10 + oNoToString中，同样是调用valueOf()方法将对象转换为数字后进行加法运算，结果为466 。

基本类型转换为对象

console.log(typeof new Number(123)); // "object"
console.log(new Number(123) instanceof Number); // true
console.log(new String("abc").charAt(1)); // "b"
console.log(new Boolean(true).valueOf()); // true
console.log(123 === new Number(123)); // false

我们可以通过包装对象将基本类型转换为对应的对象类型。对于数字123 ，typeof new Number(123)返回"object" ，且new Number(123) instanceof Number返回true ，确认其为Number对象。

对于字符串"abc" ，new String("abc").charAt(1)调用String对象的charAt方法，返回索引为1的字符"b" 。

对于布尔值true ，new Boolean(true).valueOf()调用Boolean对象的valueOf方法，返回原始值true 。

而123 === new Number(123)返回false ，因为基本类型123和对象类型new Number(123)的比较规则不同。

BigInt 类型的转换

随着 JavaScript 的发展，引入了BigInt类型，用于处理大整数。在实际应用中，也会涉及到BigInt类型和其他类型之间的转换。

其他类型转换为 BigInt

console.log(typeof BigInt(123)); // "bigint"
console.log(BigInt("456")); // 456n
console.log(BigInt(true)); // 1n

使用BigInt()函数可将其他类型的数据转换为BigInt类型。对于数字123 ，typeof BigInt(123)返回"bigint" ，确认转换后的类型。对于字符串"456" ，BigInt("456")返回456n 。

对于布尔值true ，BigInt(true)返回1n 。需要注意的是，BigInt类型不能和普通的number类型直接进行运算，否则会抛出错误。