10分钟的时间，带你彻底搞懂JavaScript数据类型转换

亦凉 2024-04-22 12:27 119阅读 0赞

**前言**

> ? 大家好，我是南木元元，热衷分享有趣实用的文章，希望大家多多支持，一起进步！
> 
> ? **个人主页：[南木元元][Link 1]**

--------------------

**目录**

JS数据类型

3种转换类型

ToBoolean

ToString

ToNumber

对象转原始类型

隐式类型转换

结语

--------------------

JS数据类型

首先我们需要知道，js中数据类型分为两大类：**基本数据类型**和**引用数据类型**。

7种基本数据类型分别是：

*  Boolean
 *  Null
 *  Undefined
 *  Number
 *  String
 *  Symbol
 *  BigInt

引用数据类型即**对象Object**，包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function。

## 3种转换类型 ##

在JS中，类型转换只有三种情况：

*  转换成布尔值
 *  转换成字符串
 *  转换成数字

数据类型转换的基本规则见下表：

![2319de0daea24909908fe64c702dcbc1.png][]

### ToBoolean ###

> `ToBoolean`指其他类型转换为布尔类型的操作。

js中的假值只有`0、-0、NaN``、""、false`、`null`、`undefined`，其它值转为布尔型都为`true`。

console.log(Boolean(0)); // flase
    console.log(Boolean(-0)); // flase
    console.log(Boolean(NaN)); // flase
    console.log(Boolean("")); // flase
    console.log(Boolean(null)); // flase
    console.log(Boolean(undefined)); // flase
    console.log(Boolean(false)); // flase
    
    //其它所有值都转为true，包括所有对象
    console.log(Boolean([])); //true
    console.log(Boolean({})); //true
    console.log(Boolean("0")); //true
    console.log(Boolean(1)); //true

###  ###

### ToString ###

> ToString指其他类型的值转换为字符串类型的操作。

转为字符串的规则：

*  null：转为"null"
 *  undefined：转为"undefined"
 *  Boolean类型：true转为"true"，false转为"false"
 *  Number类型：直接转换，如5转为"5"（不过那些极小和极大的数字会使用指数形式，如`1e21`转为`"1e+21"`）
 *  Symbol类型：直接转换（只允许显式强制类型转换，使用隐式强制类型转换会报错）
 *  数组：转为由逗号分隔的一系列数字组成的字符串 ，如`[1,2]`转为`"1,2"`
 *  普通对象：会调用`Object.prototype.toString()`，返回`"[object Object]"`，如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。

console.log(String(null)); //'null'
    console.log(String(undefined)); //'undefined'
    console.log(String(true)); //'true'
    console.log(String(false)); //'false'
    console.log(String(5)); //'5'
    console.log(String(1e21)); //'1e+21'
    console.log(String(Symbol("5"))); //"Symbol(5)"
    console.log(String([1, 2]));  '1,2'
    console.log(String({})); // '[object Object]'

### ToNumber ###

> `ToNumber`指其他类型转换为数字类型的操作。

转为数字的规则：

*  null：转为0
 *  undefined：转为NaN
 *  Boolean类型：true转为1，false转为 0
 *  String类型：如果是纯数字形式，则转为对应的数字，空字符转为`0`，否则转为NaN
 *  Symbol类型：不能转为数字，会报错
 *  对象：会先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。

console.log(Number(null)); //0
    console.log(Number(undefined)); //NaN
    console.log(Number(true)); //1
    console.log(Number(false)); // 0
    console.log(Number("10")); //10
    console.log(Number("")); //0
    console.log(Number("10a")); //NaN
    console.log(Number(Symbol("a"))); //TypeError: Cannot convert a Symbol value to a number
    console.log(Number([])); // 0
    console.log(Number(["1"])); // 1
    console.log(Number({})); // NaN

## 对象转原始类型 ##

上面提到了如果是对象，则会先被转为基本类型，那么这个过程到底是怎么样的？

其实，对象转原始类型，会调用内置的[ToPrimitive方法][ToPrimitive]，逻辑如下：

1.  如果有Symbol.toPrimitive()方法，优先调用再返回
2.  调用valueOf()，如果转换为原始类型，则返回
3.  调用toString()，如果转换为原始类型，则返回
4.  如果都没有返回原始类型，会报错

> 注意：Date是个例外，要先调用toString，再调用valueOf来转换

**来看下面的几个例子：**

1.有Symbol.toPrimitive()方法，优先调用返回。

var obj = {
      value: 3,
      valueOf() {
        return 4;
      },
      toString() {
        return '5'
      },
      [Symbol.toPrimitive]() {
        return 6
      }
    }
    console.log(obj + 1); // 输出7

2.toString 返回的不是基本类型值，valueOf 返回的基本类型值。

// toString 返回的不是基本类型值，valueOf 返回的基本类型值
    var obj = {
      toString: function () {
        return {};
      },
      valueOf: function () {
        return null;
      },
    };
    console.log(String(obj)); // "null"

3.valueOf和toString都没有返回原始类型，会报错。

// 先判断valueOf⽅法，再判断toString⽅法，返回的都不是基本类型值，报错
    var obj = {
      valueOf: function () {
        return {};
      },
      toString: function () {
        return {};
      },
    };
    console.log(Number(obj)); // Uncaught TypeError: Cannot convert object to primitive value

## 隐式类型转换 ##

在开发中，为什么建议大家使用===而不是==呢？

其实主要原因就是需要避免==所带来的隐式类型转换，下面就来看看js中有着很多坑的隐式转换。

JavaScript中的隐式类型转换主要发生在`+、-、*、/`以及`==、>、<`这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用上面的`ToPrimitive方法`转换成基本类型，再进行操作。

不同操作符的隐式转换规则不同。

*  **+操作符**

两边有至少一个`string`类型变量时，两边的变量都会被隐式转换为字符串；其他情况下两边的变量都会被转换为数字。

1 + "23"; // '123'
    1 + false; // 1
    1 + Symbol(); // Uncaught TypeError: Cannot convert a Symbol value to a number
    "1" + false; // '1false'
    false + true; // 1

*  `-`、`*`、`\`**操作符**

一律转换成**数值**后计算。

1 * "23"; // 23
    1 * false; // 0
    1 / "aa"; // NaN

*  `<`**和**`>`**比较符**

两边都是字符串，则比较字母表顺序；其他情况下，转换为数字再比较。

"ca" < "bd"; // false
    "a" < "b"; // true
    "12" < 13; // true
    false > -1; // true

*  **==操作符**

==的隐式转换规则相对来说比较复杂，它的转换规则如下：

1.  两边的类型是否相同，相同的话就比较值的大小
2.  判断两边是否是null和undefined，是的话就返回true
3.  判断的类型是否是String和Number，是的话，把String类型转换成Number，再进行比较
4.  判断其中一方是否是Boolean，是的话就把Boolean转换成Number，再进行比较
5.  如果其中一方为Object，且另一方为String、Number或者Symbol，会将Object转换成字符串，再进行比较

其实可以概括一下：两边的值都尽量转成**Number**。

console.log(3 == true); //false
    console.log("0" == false); //true
    console.log("0" == 0); //true
    console.log({ a: 1 } == true); //false
    console.log({ a: 1 } == "[object Object]"); //true

了解了上面的规则后，来看下面几道经典的题。

**1.\[\]==\[\]的结果是什么？为什么？**

答案为false。

原因：==两边都是对象的话，仅当它们引用同一个对象时返回`true`。数组是引用数据类型，在创建两个不同的数组时，引用的是两个不同的对象，所以不同。

**2.\[\] == !\[\]结果是什么？为什么？**

答案为true。

原因：先算右边（!的优先级要大于==），右边的结果是布尔值，那么根据上面==的隐式转换规则4，两边都转换成数字然后进行比较。左边\[\]转换为数字为0。右边!\[\] 首先是转换为布尔值，由于\[\]作为一个引用类型转换为布尔值为true，因此!\[\]为false，进而在转换成数字，变为0。0 == 0 ， 所以结果为true。

**3.如何让if(a == 1 && a == 2)条件成立？**

其实就是利用==的隐式类型转换以及对象转原始类型的过程。

var a = {
      value: 0,
      valueOf: function() {
        this.value++;
        return this.value;
      }
    };
    // 利用隐式类型转换，对象需要先转原始类型，再应用隐式类型转换规则
    console.log(a == 1 && a == 2);//true

## 结语 ##

?如果此文对你有帮助的话，欢迎?关注、?点赞、⭐收藏、**✍️**评论**，**支持一下博主~

[Link 1]: https://blog.csdn.net/weixin_43288600
[2319de0daea24909908fe64c702dcbc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/772d0da0145a492ca5bf1fa1d3de6169.png
[ToPrimitive]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive