JS：类型转换（一）从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ？

前言

JavaScript中类型转换是一个很令人头疼的问题，特别是对于初学者来说。这是由于 JavaScript 是一种弱类型语言，它在运行时会尝试自动转换数据类型，以使表达式能够执行。这种灵活性使得 JavaScript 非常强大，但也容易引发一些不直观的行为。就比如当字符串与数字相加时，例如"3" + 2，JavaScript 将数字 2 隐式转换为字符串，而不是执行数学运算。今天我们就来聊聊JS中的类型转换规则，并且带你解决经典面试问题[ ] == ![ ] ？。

基本数据类型转换

JavaScript中有七种原始数据类型，分别是数字类型(Number)、字符串类型(String)、布尔类型(Boolean)、未定义类型(Undefined)、空值类型(Null)、符号类型(Symbol)和BigInt类型。我们现在来基础介绍一下先：

1. Number（数字）：

   • 用于表示整数或浮点数。

   javascriptCopy code
   var integer = 42;
   var float = 3.14;

2. String（字符串）：

   • 用于表示文本。

   var text = "Hello, World!";

3. Boolean（布尔）：

   • 用于表示逻辑值，只能是 true 或 false。

   var isTrue = true;
   var isFalse = false;

4. Undefined（未定义）：

   • 表示声明了变量但未给其赋值时的默认值。

   var undefinedVariable;

5. Null（空）：

   • 表示变量没有值，是一种特殊的空值。

   var nullValue = null;

6. Symbol（符号）：

   • 引入于ECMAScript 6，用于创建唯一的标识符。

   var symbol = Symbol("unique");

7. BigInt（大整形）：

   var big = 123n

基本数据类型转数字型

这里我们使用Number() 函数，可以显式地将其他数据类型转换为数字。当我们console.log(Number())时，括号里为空，那么将输出0

1. 字符串转数字

console.log(Number('123')); // 123
console.log(Number('hello')); // NaN   

• 1. 将字符串 '123' 转换为数字。在这种情况下，字符串表示的是一个整数，所以 Number('123') 的结果是数字 123。因此，console.log 会输出 123。
• 2. 试图将字符串 'hello' 转换为数字。然而，由于字符串 'hello' 不是有效的数字表示，因此 Number('hello') 的结果是 NaN（Not a Number）。NaN 是一个特殊的 JavaScript 值，表示无法表示的或者非数字的值。因此，console.log 会输出 NaN。

2. 布尔类型转数字

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

1. 第一个语句：console.log(Number(true));

   试图将布尔值 true 转换为数字。在 JavaScript 中，布尔值 true 在进行数字转换时被转换为数字 1。因此，Number(true) 的结果是 1。console.log 输出的结果为 1。

2. 第二个语句：console.log(Number(false));

   这行代码试图将布尔值 false 转换为数字。在 JavaScript 中，布尔值 false 在进行数字转换时被转换为数字 0。因此，Number(false) 的结果是 0。console.log 输出的结果为 0。

Number(true) 结果为 1，因为布尔值 true 在转换为数字时被视为 1。 Number(false) 结果为 0，因为布尔值 false 在转换为数字时被视为 0。

3. Undefined 和 NUll 转数字

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

1. 第一个语句：console.log(Number(undefined));

   这行代码试图将 undefined 转换为数字。由于 undefined 表示变量已声明但未初始化，它在进行数字转换时会得到 NaN（Not a Number）。因此，Number(undefined) 的结果是 NaN。console.log 输出的结果为 NaN。

2. 第二个语句：console.log(Number(null));

   这行代码试图将 null 转换为数字。在 JavaScript 中，null 在进行数字转换时被转换为数字 0。因此，Number(null) 的结果是 0。console.log 输出的结果为 0。

总结：

• Number(undefined) 结果为 NaN，因为 undefined 无法转换为数字。
• Number(null) 结果为 0，因为 null 在转换为数字时被视为 0。

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

基本数据类型转布尔型

在JavaScript中，可以使用 Boolean() 构造函数将其他数据类型转换为布尔类型。Boolean() 函数会根据传入的值进行布尔类型的转换。

1. 数字类型转布尔类型

在JavaScript中，将数字类型转换为布尔值遵循一些规则。这涉及到"truthy"（真值）和"falsy"（假值）的概念。以下是一些规则：

1. Truthy 值（真值）：

   • 大多数数字（除了 0 和 NaN）都被视为真值。
   • 正数、负数、正无穷大（Infinity）都是真值。
   • 小数、负无穷大（-Infinity）也是真值。

   console.log(Boolean(1));        // true
   console.log(Boolean(-1));       // true
   console.log(Boolean(0.5));      // true
   console.log(Boolean(Infinity));  // true

2. Falsy 值（假值）：

   • 数字 0 被视为假值。
   • 负零 -0 也被视为假值。
   • 非数值的数字，如 NaN，被视为假值。

   console.log(Boolean(0));       // false
   console.log(Boolean(-0));      // false
   console.log(Boolean(NaN));     // false

字符串类型转布尔型

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

这段代码使用 console.log 打印了两个语句的执行结果：

1. Boolean('123')：

   • 非空字符串 '123' 被视为真值，因此 Boolean('123') 的结果为 true。

2. Boolean('')：

   • 空字符串 '' 被视为假值，因此 Boolean('') 的结果为 false。

在JavaScript中，字符串类型的转换规则是：

• Truthy 值（真值）：

  • 所有非空字符串都被视为真值。

• Falsy 值（假值）：

  • 空字符串 '' 被视为假值。

Undefin 和 null

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

1. Boolean(undefined)：

   • undefined 在布尔转换中被视为假值，因此 Boolean(undefined) 的结果是 false。

2. Boolean(null)：

   • null 在布尔转换中也被视为假值，因此 Boolean(null) 的结果是 false。

基本数据类型转字符串型

在JavaScript中，String() 是一个全局对象的构造函数，可以用于将其他数据类型转换为字符串。

1. 数字转字符串：

console.log(String(123)); // '123'
console.log((String(0)));  // '0'
console.log(String(NaN));  // 'NaN'
console.log(String(Infinity));  // 'Infinity'

• 1. String(123)：
  • 将数字 123 转换为字符串，得到字符串 '123'。
• 1. String(0)：
  • 将数字 0 转换为字符串，得到字符串 '0'。
• 1. String(NaN)：
  • 将特殊的数值 NaN 转换为字符串，得到字符串 'NaN'。
• 1. String(Infinity)：
  • 将特殊的数值 Infinity 转换为字符串，得到字符串 'Infinity'。

2. 布尔值转字符串：

     console.log(String(true));   // 'true'

将布尔值true转换为字符串，得到字符串 'true'。

3. null 和 undefined 转字符串：

console.log(String(undefined)); // 'undefined'
console.log(String(null));  // 'null