被 JS 类型转换坑了那么久，终于找到正确的理解方式！清晰地理解 JavaScript 中数据类型的转换机制,不仅能够帮

引言

开始之前，问一个简单的问题：在es6之前JS有多少种数据类型？

答案是：五种简单数据类型(String,Number,Boolean,Null,Undefined)和一种复杂数据类型(Object)。
这篇文章我们先聊聊简单数据类型的转换，复杂数据类型的转换留到下篇再聊。

基本数据类型间的显式类型转换之Boolean()

Boolean() 是一种将任何类型的值转换为布尔值（true 或 false）的方式。我们可以通过 Boolean() 函数来转换不同类型的值，下面是一些常见的例子：

   console.log("'1'",Boolean("1")) //String
   console.log("1",Boolean(1))     //Number
   console.log("null",Boolean(null))//Null
   console.log("undefined",Boolean(undefined))// Undefined

上面代码的输出结果是true,true,false,false，你答对了吗？
接下来，看看 Boolean() 转换一些特殊值时的表现：

   console.log("不传参",Boolean())
   console.log("true",Boolean(true))
   console.log("false",Boolean(false))
   console.log("''",Boolean(""))     //空字符串
   console.log("+0",Boolean(+0))     //正向无限趋于0
   console.log("-0",Boolean(-0))     //负向无限趋于0
   console.log("NaN",Boolean(NaN))  //Not a number 不是数字

上面代码的输出结果是1:false,2:true,3:false,4:false,5:false,6:false,7：false。

小拓展之`+0`和`-0`

在JavaScript中，+0 和 -0 都是数字类型的值，表示正向趋于0和负向趋于0

   1 / +0; // Infinity  正无穷大
   1 / -0; // -Infinity 负无穷大

小拓展之`NaN`

NaN（Not a Number）是 JavaScript 中一个特殊的数字，表示无法表示的数字。即使 NaN 本身是数字类型，它也无法参与有效的数学运算。

Boolean 显示类型转换(构造函数)规则

为false的情况
- 为空（不传参）：false
- 为false： false
- 为undefined： false
- 为null： false
- 为""（空字符串）： false
- 为+0： false
- 为-0： false
- 为NaN： false
为true的情况
- 为true: true
- 为非空字符串: true
- 为数字: true

基本数据类型间的显式类型转换之Number()

Number() 是用来将任何类型的值转换为数字类型的函数。还是一样的套路，先上代码：

   console.log("123",Number("123"));  //String
   console.log("1",Number(1));        //Number
   console.log("null",Number(null)); // Null
   console.log("undefined",Number(undefined)); //Undefined
   console.log("true",Number(true));   //Boolean
   console.log("false",Number(false)); //Boolean

上面代码的输出结果是：123,1,0,NaN,1,0。
undefined -> NaN (Not a Number) ?
这是因为当 undefined 被转换为数字类型时，根据语言的规范，它没有一个明确的数值表示。因此，JavaScript 将其视为无法转换为有效数字，从而返回 NaN。接着看代码：

   console.log("-123",Number("-123"));
   console.log("0x11",Number("0x11"));// 二进制数
   console.log("''",Number(""),"' '",Number(" "));// 空字符串
   console.log("100a",Number("100a"));
   console.log("+0",Number(+0));
   console.log("-0",Number(-0));

上面代码的输出结果是：-123,17,0 0,NaN,0,-0,是不是挺简单。

Number显示类型转换(构造函数)规则

为NaN的情况
- undefined
- null
- 非数字字符串
- NaN本身
其他情况
- 布尔值
  - false 0
  - true 1
- 数字
  - 任何数字都会保持不变
  - 可解析为数字的字符串

基本数据类型间的显式类型转换之String()

String() 用于将其他类型转换为字符串。看看以下例子：

    console.log("123",String(123));      //Number
    console.log("null",String(null));    // Null
    console.log("undefined",String(undefined)); //Undefined
    console.log("true",String(true));    // Boolean
    console.log("false",String(false));  // Boolean

上面代码的输出结果是：'123','null','undefined','true','false'，完全没难度。接着上：

    console.log("不传参",String());
    console.log("+0",String(+0));
    console.log("-0",String(-0));
    console.log("NaN",String(NaN));

上面代码的输出结果是(没有输出),0,-0,NaN。

String显示类型转换(构造函数)规则

为undefined的情况
- 'undefined'
为null的情况
- 'null'
布尔值
- false 'false'
- true -> 'true'
数字任何数字都会转换为其对应的字符串表示形式

总结

通过对 Boolean()、Number() 和 String() 的显式类型转换规则的学习，我们可以更清晰地理解 JavaScript 中数据类型的转换机制。这不仅能够帮助我们在实际编码中避免常见的类型转换错误，还能够让我们写出更简洁、更易于理解的代码。
求票🥰 activity.juejin.cn/rank/2024/w…

被 JS 类型转换坑了那么久，终于找到正确的理解方式！

引言