js面试系列：谈谈js中的类型转换机制？

前言

此前，我们已经讲解过[js面试系列：请问js字符串上有哪些方法？ - 掘金 (juejin.cn)](https://juejin.cn/post/7341212581049778203) ，下面我将为大家继续介绍一下，js中的下一个考点js中的类型转换机制。

概述

对于JavaScript中的类型来说，有着原始类型和引用类型。 原始类型 有着：number 、 string 、 symbol 、 boolean 、 undefined 、 null 、 Bigint 这几种类型。引用类型 包括：[] 、 {} 、 function 、 Date 、 Regexp 、 Set 、 Map。

但是需要了解到的是，我们在声明的时候只有一种数据类型，只有到运行期间才会确定当前类型。如以下示例：

let a = b ? 1 : c;

上述示例中，我们根据v8的编译规则可以知道，a的值在编译阶段是无法获取的，只有等到程序运行后才能知道。而此时对于a的类型来说，我们是不清楚的，但是对于运算操作符来说它是需要确定变量的类型的，因此当运算的的类型不符合预期时，就会触发类型转换机制。

类型转换的触发

在 JavaScript 中，类型转换机制会在以下情况下触发：

1. 运算符操作： 当对不同类型的值进行运算时，JavaScript 引擎会根据运算符的规则执行隐式类型转换。例如，使用加号运算符（+）时，如果其中一个操作数是字符串，则会将其他操作数转换为字符串，然后执行字符串拼接操作。

示例

let num = 10;
let str = "20";
let result = num + str; // 10 + "20" => "1020"

2. 比较操作： 在比较不同类型的值时，JavaScript 引擎也会执行隐式类型转换以便进行比较。例如，使用相等运算符（==）时，如果操作数类型不同，则会尝试将它们转换为相同的类型，然后再进行比较。

示例

let num = 10;
let str = "10";
console.log(num == str); // true

3. 函数调用： 在调用某些函数时，会触发显式类型转换。例如，使用 parseInt()、parseFloat()、Number()、String()、Boolean() 等函数时，会将参数转换为指定的类型。

示例

let str = "123";
let num = Number(str);

4. 逻辑操作： 在执行逻辑运算（如逻辑与 &&、逻辑或 ||、逻辑非 !）时，JavaScript 引擎会根据逻辑运算符的规则执行隐式类型转换。例如，在进行逻辑或运算时，如果第一个操作数为假值，则会返回第二个操作数。

示例

let result = null || "default value";

5. 对象转换： 在某些情况下，JavaScript 引擎会将对象转换为原始值。例如，当对象被用作字符串上下文时，会调用对象的 toString() 方法来获取字符串表示。

示例

let obj = { name: "John", age: 30 };
let str = "The object is: " + obj; // 调用 obj.toString() 方法

6. 数组转换： 在某些情况下，JavaScript 引擎会将数组转换为字符串。例如，在使用数组作为参数调用 join() 方法时，会将数组中的元素连接成一个字符串。

示例

let arr = [1, 2, 3];
let str = arr.join(", "); // "1, 2, 3"

而以上的类型转换可以分为：强制转换（显示转换）和自动转换（隐式转换）。

显示类型转换

显示类型转换是指通过代码显式地将一个数据类型转换为另一个数据类型。在 JavaScript 中，显示类型转换可以通过一些内置函数或操作符来实现。下面是一些常见的显示类型转换方法以及相应的示例：

1. 转换为字符串类型（String）

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

当然前面例子中+的拼接操作符也是可以实现的。

2. 转换为数字类型（Number）

对于将其他类型转换为 Number类型，在JavaScript中有着如下的方式：

• parseInt() 和 parseFloat() 函数： 将字符串转换为整数或浮点数。

let str = "123";
let num = parseInt(str);
console.log(typeof num); // 输出: "number"

• Number() 函数： 将其他数据类型转换为数字类型。

let str = "123";
let num = Number(str);
console.log(typeof num); // 输出: "number"

3. 转换为布尔类型（Boolean）

• Boolean() 函数： 将其他数据类型转换为布尔类型。

let str = "Hello";
let bool = Boolean(str);
console.log(typeof bool); // 输出: "boolean"

• 使用逻辑运算符（!!）： 使用两个逻辑非操作符将其他数据类型转换为布尔类型。

let str = "Hello";
let bool = !!str;
console.log(typeof bool); // 输出: "boolean"

4. 转换为数组类型（Array）

• Array.from() 函数： 将类数组对象或可迭代对象转换为数组。

let arrayLike = { 0: 'a', 1: 'b', length: 2 };
let newArr = Array.from(arrayLike);
console.log(Array.isArray(newArr)); // 输出: true

• 使用展开运算符（...）： 将可迭代对象展开为数组。

let iterableObj = 'abc';
let newArr = [...iterableObj];
console.log(Array.isArray(newArr)); // 输出: true

以上就是实现显示类型转换的方法。

隐式类型转换

在在V8执行过程中还存在另一种类型转换 --- 隐式类型转换，数据类型的转换是由 JavaScript 引擎自动完成的，而不需要程序员显式地调用转换函数或操作符。隐式类型转换通常发生在运算符或表达式中，以确保操作的顺利进行。下面是一些常见的隐式类型转换方法以及相应的示例：

我们这里可以归纳为两种情况发生隐式转换的场景：

• 比较运算（==、!=、>、<）、if、while需要布尔值地方
• 算术运算（+、-、*、/、%）

1. 字符串和数字之间的隐式转换

在算术运算中，如果一个操作数是字符串，另一个操作数是数字，JavaScript 将尝试将字符串转换为数字，然后执行相应的运算。

let num = 10;
let str = "5";
let result = num + str;
console.log(result); // 输出: "105"，字符串 "5" 被转换为数字 5，然后相加得到 "105"

2. 布尔值和其他类型之间的隐式转换

在布尔运算中，JavaScript 将其他数据类型转换为布尔值。在条件判断语句中，JavaScript 将其他数据类型转换为布尔值进行判断。

let num = 10;
let bool = (num !== 0); // num 不等于 0，被转换为 true
console.log(bool); // 输出: true

let str = "Hello";
if (str) {
    console.log("String is not empty"); // 字符串非空，被转换为 true
}

3. 数字和其他类型之间的隐式转换

在算术运算中，JavaScript 将其他数据类型转换为数字。

let num1 = 5;
let str = "10";
let result = num1 + str; // 字符串 "10" 被转换为数字 10，然后相加得到 15
console.log(result); // 输出: 15

let bool = true;
let result2 = num1 + bool; // 布尔值 true 被转换为数字 1，然后相加得到 6
console.log(result2); // 输出: 6

4. 对象和原始值之间的隐式转换

在某些情况下，JavaScript 将对象转换为原始值，通常是在使用一元加法运算符或一元减法运算符时。

let obj = {
    valueOf: function() {
        return 10;
    }
};

console.log(+obj); // 输出: 10，对象被转换为数字

5. 特殊情况下的隐式转换

在某些特殊情况下，JavaScript 的隐式类型转换可能会产生意想不到的结果。

console.log(10 + null); // 输出: 10，null 被转换为 0
console.log("5" + 5); // 输出: "55"，数字 5 被转换为字符串 "5"
console.log("5" - 2); // 输出: 3，字符串 "5" 被转换为数字 5
console.log(true + true); // 输出: 2，布尔值 true 被转换为数字 1

以上是一些常见情况下的隐式类型转换和示例。

结语

总的来说，类型转换机制是 JavaScript 中一项基础且必不可少的特性，对于提高开发效率和代码质量都具有重要意义。希望本文对你理解 JavaScript 类型转换机制有所帮助，能够在实际开发中运用自如，编写出更加优秀的 JavaScript 代码。