JavaScript 数据类型转换详解（推荐）

JavaScript 数据类型

在 JavaScript 语言中，数据类型主要分为两大类：基本数据类型和复杂数据类型。

基本数据类型包括以下几种：

• number（数值）
• string（字符串）
• boolean（布尔值）
• null（空值）
• undefined（未定义）
• symbol（符号）
• bigint（大整数）

复杂数据类型主要包括：

• 标准普通对象：object
• 标准特殊对象：Array、RegExp、Date、Math、Error 等
• 非标准特殊对象：Number、String、Boolean 等包装对象
• 可调用/执行对象：function（函数）

类型之间的转换

类型转换主要分为两种形式：隐式类型转换和显式类型转换。

显式类型强制转换是指开发人员通过编写特定代码来执行类型转换，例如使用 Number(value) 函数。

隐式类型转换是指在操作不同类型的值使用运算符时，JavaScript 引擎自动进行的类型转换，例如表达式 0 == null 中发生的转换。

在 JavaScript 中，类型转换主要涉及三种目标类型：

• 转化为 Number 类型：Number()、parseFloat()、parseInt()
• 转化为 String 类型：String()、toString()
• 转化为 Boolean 类型：Boolean()

无论原始类型还是对象类型，转换逻辑最终只会指向上述三种类型之一。因此，关键在于理解在不同场景下应转换为哪种类型。

转换为 boolean

显式转换：Boolean() 方法可用于将值显式转换为布尔型。

隐式转换：通常在逻辑判断语句或涉及逻辑运算符（||、&&、!）时触发。

boolean 类型的转换结果仅为 true 或 false。除了“0”、“NaN”、“空字符串”、“null”、“undefined”这五个值为 false 外，其余所有值转换后均为 true。

转换为string

显式转换：String() 方法可用于将值显式转换为字符串。

String([1,2,3])    //"1,2,3"
String({})    //"[object Object]"

隐式转换：当 + 运算符的两个操作数中至少有一个是 string 类型时，通常会触发隐式转换。

当 + 代表字符串拼接时，以下情况会触发转换：

• 若表达式两边存在字符串，则执行字符串拼接操作；
• 若表达式两边存在对象，则需先将对象转换为原始值再进行拼接。

1 + {}     //"1[object Object]"
NaN + {} //"NaN[object Object]"

转换为number

显式转换：Number() 方法可用于将值显式转换为数字类型。

字符串转换为数字时，空字符串变为 0；若字符串中包含任何非有效数字字符，结果均为 NaN。

Number("")           //0
Number("10px")       //NaN
Number("10")         //10

布尔值转换为数字：

Number(true)         //1
Number(false)        //0

null 和 undefined 转换为数字：

Number(null)         //0
Number(undefined)    //NaN

Symbol 类型无法转换为数字，尝试转换会报错：Uncaught TypeError: Cannot convert a Symbol value to a number。

BigInt 类型去除末尾的“n”后缀后转换为数字。

Number(12312412321312312n)     //12312412321312312

对象转换为数字时，会按照以下步骤执行：

首先调用对象的 Symbol.toPrimitive 方法，如果该方法不存在；

接着调用对象的 valueOf 方法获取原始值，如果获取的值不是原始值；

再调用对象的 toString 方法将其变为字符串；

最后将得到的字符串基于 Number() 方法转换为数字。

let obj ={
    name:'xxx'
}
console.log(obj-10) // 数学运算：先把obj隐式转换为数字，再进行运算
//运行机制
obj[Symbol.toPrimitive] //undifined 
obj.valueof() // {name:xxx}
obj.toString() // [object object]
Number ("[object object]") // NaN
NaN-10 // NaN 
obj+10 //"[object object]10"

隐式转换：number 类型的隐式转换较为复杂，可能在多种情况下被触发。

• 比较操作（>, <, <=, >=）
• 按位操作（|、&、^、~）
• 算术操作（-、+、*、/、%），注意：当 + 运算符存在任意一个操作数是 string 类型时，不会触发 number 类型的隐式转换，而是执行字符串拼接。
• 一元 + 操作

操作符 == 两边的隐式转换规则

如果两边数据类型不同，需要先转为相同类型，然后再进行比较。以下几种情况需要特别注意：

可以参考相关图表，例如对象和布尔值比较时：

• 对象 => 字符串 => 数值
• 布尔值 => 数值。

对象与字符串比较：

[1,2,3]=='1,2,3'              //true
[1,2,3][Symbol.toPrimitive]   //undefined
[1,2,3].valueOf()             //[1, 2, 3]
[1,2,3].toString()            //"1,2,3"

null 与 undefined 比较：

null==undefined      //true 
null===undefined     //false  不会发生隐试类型转换

注意：null 和 undefined 与其他任何值都不相等（除彼此外）。

对象与对象比较：

比较的是堆内存地址，地址相同则相等。

{}=={}      //false   因为比较的是地址

NaN 的比较：

除以上特殊情况外，只要两边类型不一致，其余情况均转换为数字，然后再进行比较。

需要注意的情况

{} + [] === 0               // true
[] + {} === 0               // false

[] + {}  = "[object Object]"
{} + []  = 0
/**
  * 对于编译器而言，代码块不会返回任何的值
  * 接着+[]就变成了一个强制转number的过程
  * []通过ToPrimitive变成''，最后''通过ToNumber操作转换成0
  **/

结尾练习

let result = 100 + true + 21.2 + null + undefined + “Tencent” + [] + null + 9 + false;

result 的结果是？

1.首先 100 + true + 连接符两边存在 Number 类型，true 转 number 为 1，进行加法运算，结果为：101 2.101 + 21.2 + 连接符两边均为 Number 类型，进行加法运算，结果为：122.2 3.122.2 + null + 连接符两边存在 Number 类型，null 转 number 为 0，进行加法运算，结果为：122.2 4.122.2 + undefined + 连接符两边存在 Number 类型，undefined 转 number 为 NaN，NaN 与任何数据类型计算都为 NaN，结果为：NaN 5.NaN + "Tencent" + 连接符两边存在 String 类型，NaN 转 string 为"NaN"，进行字符串拼接，结果为："NaNTencent" 6."NaNTencent" + [] + 连接符两边存在 String 类型，[] 转 string 为""，进行字符串拼接，结果为："NaNTencent" 7."NaNTencent" + null + 连接符两边存在 String 类型，null 转 string 为"null"，进行字符串拼接，结果为："NaNTencentnull" 8."NaNTencentnull" + 9 + 连接符存在 String 类型，9 转 string 为"9"，进行字符串拼接，结果为："NaNTencentnull9" 9."NaNTencentnull9" + false + 连接符存在 String 类型，false 转 string 为"false"，进行字符串拼接，结果为："NaNTencentnull9false"

总结

到此这篇关于 JavaScript 数据类型转换的文章就介绍到这了，更多相关 js 数据类型转换内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！