JavaScript中的类型转换详解

在JavaScript中，类型转换是语言的核心特性之一，它允许开发者在不同的数据类型之间灵活地转换。这既包括显式的类型转换，也涵盖了隐式的类型转换，后者通常在运算符或方法调用时自动发生。下面我们将深入探讨几种常见的类型转换场景，并举例说明。

原始值转原始值

这是最直接的类型转换方式，通过内置的转换函数实现。

• 转布尔: Boolean(x)
  • Boolean("Hello") 结果为 true
  • Boolean("") 结果为 false
  • Boolean(0) 结果为 false

let s = 's'
let n = 123
let f = false
let u = undefined
let ny = null
console.log(Boolean(s));
console.log(Boolean(''));
console.log(Boolean(n));
console.log(Boolean(0));
console.log(Boolean(-1));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(Infinity)); //可描述的数字里只有0会被判定为false 字符串只有空字符串会被判定为false

console.log(String(n));

• 转数字: Number(x)
  • Number("123") 结果为 123
  • Number("123abc") 结果为 NaN
• 转字符串: String(x)
  • String(123) 结果为 "123"
  • String(true) 结果为 "true"

对象转原始值

对象转换为原始值通常发生在需要对对象进行数值或字符串运算时，JS会尝试将其转换为相应的原始类型。

• 转数字: Number({})
  • 这个过程首先尝试调用对象的 valueOf() 方法，如果没有返回原始类型，则尝试调用 toString() 方法。若两者均未返回原始类型，则抛出错误。
  • 转number：总结如下

Number({})

先调用ToNumber(x),该函数中会再调用ToPrimtive()将对象转化为原始值

ToPrimtive(obj,Number)

1. 判断接收到的值是不是原始类型，是则返回
2. 否则，调用valueOf方法，如果得到了原始值，则返回
3. 否则，调用toString方法，如果得到了原始值，则返回
4. 报错

• 转字符串: String({})
  • 同样，首先尝试调用 toString() 方法，如果未得到原始类型，则尝试 valueOf() 方法。
  • 转String: 总结如下：

String({})

先调用ToString(x),该函数中会再调用ToPrimitive()将对象转化为原始值

1. 判断接收到的值是不是原始类型，是则返回
2. 否则，调用toString方法，如果得到了原始值，则返回
3. 否则，调用valueOf方法，如果得到了原始值，则返回
4. 报错

if({}){
    console.log('ojbk');
}

console.log(Number({}));
// Tonumber({})
// ToPrimitive({},Number)
// ToNumber('[object object]')
// NaN

console.log(Number([]));
// Tonumber([])
// ToPrimitive([],Number)
// ToNumber('')
// 0


console.log(String({}));
// ToString({})
// ToPrimitive({},String)  //'[object Object]'
// ToString('[object object]') //'[object Object]'
// '[object object]'

• 转布尔: 任何对象转换为布尔值时，结果总是 true。

toString 方法

大多数对象都有 toString 方法，用于返回对象的字符串表示形式。

• Object.prototype.toString() 返回类似 [object Object] 的字符串。
• Array.prototype.toString() 返回数组元素以逗号分隔的字符串。
• 自定义对象的 toString 方法可以返回自定义的字符串表示。

一元操作符 +

一元加号操作符 + 会触发隐式类型转换，将操作数转换为数字。

• +"123" 结果为 123 (数字)

二元运算符 +

二元加号操作符 + 在两个操作数都是字符串时执行字符串拼接，在至少有一个操作数是数字时执行数学加法。

• "123" + "456" 结果为 "123456" (字符串拼接)
• "123" + 456 结果为 "123456" (先转换为数字，再进行数学加法)

== vs ===

• == 操作符在比较前会尝试类型转换，然后判断值是否相等。
  • "123" == 123 结果为 true
• === 操作符在比较时不进行类型转换，只有当类型和值都相等时才返回 true。
  • "123" === 123 结果为 false

console.log("123" == 123); // true
console.log("123" === 123); // false
console.log([] == ![])  // true