面试经典头疼问题：JavaScript中的类型转换[1]—基本数据类型转换

序言

今天我们要来聊的内容是许多朋友遇到都会感到头疼的一些问题，虽然他们并不是很难，但是真的很恶心T T ，我相信有不少朋友在面试的时候碰到过HR问这么一个问题[] == ![]是True or False,然后叫你并解释一下，虽然要回答出答案并不困难，但是要详细解释引擎执行这段代码的过程却很繁琐，我们需要对JS中类型转化的规则很清楚。那么话不多说，直接让我们上今天的干货，就让我们来聊一聊JS中的类型转换规则，聊完你就能在这种题型里势不可挡，无坚不摧！

基本数据类型的转换

JavaScript中有七种原始数据类型，分别是数字类型(Number)、字符串类型(String)、布尔类型(Boolean)、未定义类型(Undefined)、空值类型(Null)、符号类型(Symbol)和BigInt类型。

基本数据类型转布尔值类型

1. 数字类型(Number)：在JavaScript中，0被视为false，而其他非零数字被视为true。

console.log(Boolean(0)); // false
console.log(Boolean(42)); // true

2. 字符串类型(String)：如果字符串为空，则被视为false，否则为true。

console.log(Boolean("")); // false
console.log(Boolean("Hello")); // true

3. 布尔类型(Boolean)：true保持不变，false保持不变。

console.log(Boolean(true)); // true
console.log(Boolean(false)); // false

4. 未定义类型(Undefined)：undefined被视为false。

console.log(Boolean(undefined)); // false

5. 空值类型(Null)：null被视为false。

console.log(Boolean(null)); // false

6. 符号类型(Symbol)：在ECMAScript 6之后引入的符号类型无法直接转换为布尔值，因此转换结果为true。

console.log(Boolean(Symbol())); // true

7. BigInt类型：在ECMAScript 2020之后引入的BigInt类型无法直接转换为布尔值，因此转换结果为true。

console.log(Boolean(BigInt(123))); // true

总结一下，我们可以使用Boolean()函数将JavaScript中的所有原始数据类型转换为布尔值。这些类型包括数字类型(Number)、字符串类型(String)、布尔类型(Boolean)、未定义类型(Undefined)、空值类型(Null)、符号类型(Symbol)和BigInt类型。需要注意的是，除了以上情况外，其他对象类型无法直接转换为布尔值。

基本数据类型转数字类型

1. 字符串类型 (String)：可以使用 Number() 函数将字符串转换为数字。如果字符串表示有效的数字 (包括整数和浮点数)，则会被转换为对应的数字。如果字符串不是有效的数字，则会被转换为 NaN (Not a Number)。

console.log(Number("42")); // 42
console.log(Number("3.14")); // 3.14
console.log(Number("Hello")); // NaN

2. 布尔类型 (Boolean)：true 会被转换为 1，false 会被转换为 0。

console.log(Number(true)); // 1
console.log(Number(false)); // 0

3. 未定义类型 (Undefined)：undefined 被转换为 NaN。

console.log(Number(undefined)); // NaN

4. 空值类型 (Null)：null 被转换为 0。

console.log(Number(null)); // 0

5. 符号类型 (Symbol) 和 BigInt 类型：符号类型 (Symbol) 和 BigInt 类型无法直接转换为数字类型，会直接报错。

console.log(Number(Symbol())); // TypeError: Cannot convert a Symbol value to a number
console.log(Number(BigInt(123))); // TypeError: Cannot convert a BigInt value to a number

总结一下，我们可以使用Number()函数将JavaScript中的五种原始数据类型转换为布尔值。这些类型包括数字类型(Number)、字符串类型(String)、布尔类型(Boolean)、未定义类型(Undefined)、空值类型(Null)。需要注意的是，符号类型(Symbol)和BigInt类型无法直接转换成数字类型如果强转会报TypeError错误

基本数据类型转字符串类型

1.数字类型(Number)：返回对应的字符串表示

    let num = 123;
    let str = String(num);
    console.log(str); // 输出 "123"

2. 布尔类型 (Boolean)：返回对应的字符串表示

    let bool = true;
    let str = String(bool);
    console.log(str); // 输出 "true"

3. 字符串类型 (String):返回对应的字符串表示

    let Str = "Hello World!";
    let str = String(Str);
    console.log(str); // 输出 "Hello World!"

5. 空值类型 (Null)和未定义类型 (Undefined)：分别返回 "null" 和 "undefined"

    let n = null;
    let u = undefined;
    let str1 = String(n);
    let str2 = String(u);
    console.log(str1); // 输出 "null"
    console.log(str2); // 输出 "undefined"

6. 符号类型 (Symbol) 和 BigInt 类型：直接返回将他们转换为字符串的表示

let sym = Symbol("foo");
let bigIntNum = BigInt(12345678901234567890);
let str1 = String(sym);
let str2 = String(bigIntNum);
console.log(str1); // 输出 "Symbol(foo)"
console.log(str2); // 输出 "12345678901234567890n"

总结一下

• 对于基本数据类型（如数字、布尔值等），String() 方法会返回对应的字符串表示。
• 对于 null 和 undefined，String() 方法会分别返回 "null" 和 "undefined"。
• 对于 Symbol 类型和 BigInt 类型，String() 方法会返回该 Symbol 和BigInt的描述字符串。

基本数据类型转对象类型

1. 数字类型(Number)和字符串类型 (String)和布尔类型 (Boolean)：转换为对应的包装类对象

JS包装类里面定义了三种原始数据类型转换成包装类对象的方法，这篇文章中有对其的详细解释JavaScript 包装类干货分享。当我们用Object()方法将他们转换成对象类型其实就是通过使用其对应的包装类方法转换成对应的包装类对象，如下例代码所示：

console.log(Object('123'));// = new String('123')

console.log(Object(123));// = new Number(123)

console.log(Object(true));// = new Number(123)

输出结果如下：

2. 空值类型 (Null)和未定义类型 (Undefined)： 返回一个空对象

console.log(Object(undefined)); // 输出 {}
console.log(Object(null)); // 输出 {}

Object 方法在接收 null 或 undefined 作为参数时，会返回一个空对象 {}。这是因为 null 和 undefined 是特殊的原始值，没有对应的包装对象。如果要将他们转为对象的话，对其使用Object 方法会将它们转换为一个空对象。

需要注意的是，这个空对象并不具有任何属性或方法，它只是一个空的普通对象。这与使用 Object.create(null) 方法创建的原型为 null 的对象是不同的。Object.create(null) 创建的对象没有原型链，而通过 Object 方法转换的空对象仍然继承自 Object.prototype。

3. 符号类型 (Symbol) 和 BigInt 类型：保留为原始类型，输出结果与输入相同，都是原始类型的值。

console.log(Object(Symbol(123))); // 输出 Symbol(123)
console.log(Object(BigInt(123n))); // 输出 BigInt(123n)

Object() 方法在这种情况下并没有将 Symbol 或 BigInt 类型转换为对象，而是将它们保留为原始类型。因此，输出结果与输入相同，都是原始类型的值。

需要注意的是，Symbol 和 BigInt 都是特殊的原始类型，它们不具备可被转换为对象的包装形式。它们拥有自己的行为和属性，并且不能直接使用 Object 方法将它们转换为对象。在这篇文章中有对这两种ES6新增类型的详解【ES6】聊聊ES6中新增的两种"原始数据类型"及"类型判断"的四种方法（1）

总结一下，通过Object()方法可以直接将三种原始数据类型转换成对的包装类对象，对于 null 或 undefined 作为参数时，会返回一个空对象 {}，对于符号类型 (Symbol) 和 BigInt 类型,会保留为原始类型，输出结果会和输入的内容一样，无法转换。

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

更多内容：用 HTML5实战打击乐Demo 虚拟类应用开发你真的掌握吗？

博主的开源Git仓库 欢迎收藏: gitee.com/cheng-bingw...