1. 类型转换的基本概念
数据类型分类
javascript
ini
// 基本数据类型（原始类型）
let str = "hello"; // string
let num = 123; // number
let bool = true; // boolean
let n = null; // null
let u = undefined; // undefined
let sym = Symbol(); // symbol
let big = 123n; // bigint
// 引用数据类型
let obj = { name: "John" }; // object
let arr = [1, 2, 3]; // array
let func = function() {}; // function
let date = new Date(); // date2. 转换原理：ToPrimitive 抽象操作
JavaScript 引擎内部使用 ToPrimitive 抽象操作来处理引用类型到基本类型的转换。
ToPrimitive 的执行过程
javascript
ini
// 伪代码表示 ToPrimitive 逻辑
function ToPrimitive(input, preferredType) {
// 1. 如果输入已经是基本类型，直接返回
if (isPrimitive(input)) {
return input;
}
// 2. 获取对象的 @@toPrimitive 方法
let exoticToPrim = GetMethod(input, @@toPrimitive);
if (exoticToPrim !== undefined) {
let result = exoticToPrim.call(input, preferredType);
if (isPrimitive(result)) {
return result;
}
throw new TypeError("Cannot convert object to primitive value");
}
// 3. 如果没有 @@toPrimitive 方法，根据 preferredType 调用 valueOf 和 toString
if (preferredType === undefined) {
preferredType = 'number';
}
return OrdinaryToPrimitive(input, preferredType);
}
function OrdinaryToPrimitive(input, hint) {
// hint 可以是 'string' 或 'number'
let methodNames;
if (hint === 'string') {
methodNames = ['toString', 'valueOf'];
} else {
methodNames = ['valueOf', 'toString'];
}
for (let name of methodNames) {
let method = input[name];
if (typeof method === 'function') {
let result = method.call(input);
if (isPrimitive(result)) {
return result;
}
}
}
throw new TypeError("Cannot convert object to primitive value");
}3. 不同场景下的转换规则
字符串上下文（String Context）
javascript
javascript
// 当需要字符串时，优先调用 toString()
let obj = {
valueOf() {
console.log('valueOf called');
return 42;
},
toString() {
console.log('toString called');
return 'object';
}
};
console.log(String(obj));
// 输出: "toString called" → "object"
console.log('' + obj);
// 输出: "valueOf called" → "42" (特殊情况)数字上下文（Number Context）
javascript
javascript
let obj = {
valueOf() {
console.log('valueOf called');
return 42;
},
toString() {
console.log('toString called');
return '100';
}
};
console.log(Number(obj));
// 输出: "valueOf called" → 42
console.log(+obj);
// 输出: "valueOf called" → 42默认上下文（Default Context）
javascript
javascript
// 当操作符不明确时，Date 对象优先使用字符串转换
let date = new Date();
date.valueOf = () => { console.log('valueOf'); return 123; };
date.toString = () => { console.log('toString'); return 'date string'; };
console.log(date + 1);
// 输出: "toString" → "date string1"
// 其他对象优先使用数字转换
let obj = {
valueOf: () => { console.log('valueOf'); return 42; },
toString: () => { console.log('toString'); return 'obj'; }
};
console.log(obj + 1);
// 输出: "valueOf" → 434. 内置对象的转换行为
Array 的转换
javascript
javascript
let arr = [1, 2, 3];
console.log(arr.valueOf()); // [1, 2, 3] (返回数组本身)
console.log(arr.toString()); // "1,2,3"
// 转换示例
console.log(String(arr)); // "1,2,3"
console.log(Number(arr)); // NaN (无法转换为数字)
console.log(arr + 10); // "1,2,310"
// 特殊情况
console.log([] + 1); // "1" (空数组转为空字符串)
console.log([5] + 1); // "51"
console.log([1, 2] + 1); // "1,21"Object 的转换
javascript
javascript
let obj = { name: "John", age: 30 };
console.log(obj.valueOf()); // {name: "John", age: 30} (返回对象本身)
console.log(obj.toString()); // "[object Object]"
// 转换示例
console.log(String(obj)); // "[object Object]"
console.log(Number(obj)); // NaN
console.log(obj + ""); // "[object Object]"Function 的转换
javascript
javascript
function test() { return "hello"; }
console.log(test.valueOf()); // ƒ test() { return "hello"; }
console.log(test.toString()); // "function test() { return "hello"; }"
console.log(String(test)); // "function test() { return "hello"; }"
console.log(Number(test)); // NaNDate 的转换
javascript
javascript
let date = new Date('2023-01-01');
console.log(date.valueOf()); // 1672531200000 (时间戳)
console.log(date.toString()); // "Sun Jan 01 2023 08:00:00 GMT+0800"
// 转换示例
console.log(String(date)); // "Sun Jan 01 2023 08:00:00 GMT+0800"
console.log(Number(date)); // 1672531200000
console.log(date + 1); // "Sun Jan 01 2023 08:00:00 GMT+08001"
console.log(date * 1); // 16725312000005. Symbol.toPrimitive 方法
ES6 引入了 Symbol.toPrimitive 方法，可以自定义对象的转换行为。
自定义转换逻辑
javascript
javascript
let user = {
name: "Alice",
age: 25,
[Symbol.toPrimitive](hint) {
console.log(`hint: ${hint}`);
switch (hint) {
case 'string':
return this.name;
case 'number':
return this.age;
case 'default':
return `${this.name} (${this.age})`;
}
}
};
console.log(String(user)); // hint: string → "Alice"
console.log(Number(user)); // hint: number → 25
console.log(user + ''); // hint: default → "Alice (25)"
console.log(user + 10); // hint: default → "Alice (25)10"实际应用示例
javascript
javascript
class Temperature {
constructor(celsius) {
this.celsius = celsius;
}
[Symbol.toPrimitive](hint) {
if (hint === 'string') {
return `${this.celsius}°C`;
} else if (hint === 'number') {
return this.celsius;
} else {
return this.celsius.toString();
}
}
}
let temp = new Temperature(25);
console.log(String(temp)); // "25°C"
console.log(Number(temp)); // 25
console.log(temp + 5); // "255" (default hint 使用 toString)6. 转换规则的详细分析
加法运算符的特殊规则
javascript
sql
// 加法运算符的转换逻辑
function additionConversion(left, right) {
// 如果任一操作数是字符串，进行字符串连接
if (typeof left === 'string' || typeof right === 'string') {
return String(left) + String(right);
}
// 否则进行数字加法
return Number(left) + Number(right);
}
// 示例
console.log([] + []); // "" + "" = ""
console.log([] + {}); // "" + "[object Object]" = "[object Object]"
console.log({} + []); // "[object Object]" + "" = "[object Object]"
console.log({} + {}); // "[object Object]" + "[object Object]" = "[object Object][object Object]"
console.log(1 + {}); // "1" + "[object Object]" = "1[object Object]"
console.log(true + []); // "true" + "" = "true"比较运算符的转换
javascript
ini
// 相等比较的转换规则
console.log([] == 0); // true
// 解析: [] → "" → 0 == 0 → true
console.log([] == false); // true
// 解析: [] → "" → 0 == 0 → true
console.log({} == "[object Object]"); // true
// 解析: {} → "[object Object]" == "[object Object]" → true
console.log(null == undefined); // true (特殊情况)
console.log(null == 0); // false (特殊情况)7. 实际应用和陷阱
常见的转换陷阱
javascript
javascript
// 陷阱1：数组的意外字符串转换
let arr = [1, 2, 3];
console.log(arr + 4); // "1,2,34" 而不是 7
// 陷阱2：对象的默认转换
let obj = {};
console.log(obj + 1); // "[object Object]1"
// 陷阱3：空数组的布尔转换
console.log(Boolean([])); // true
console.log([] == false); // true (!)安全的转换实践
javascript
javascript
// 显式转换比隐式转换更安全
let obj = { value: 42 };
// ❌ 不推荐 - 隐式转换
let result1 = obj + 10; // "[object Object]10"
// ✅ 推荐 - 显式转换
let result2 = Number(obj.value) + 10; // 52
let result3 = String(obj.value) + 10; // "4210"
// 使用明确的转换方法
let num = Number(obj);
if (isNaN(num)) {
// 处理转换失败的情况
console.log('无法转换为数字');
}实用的转换工具函数
javascript
javascript
function safeToNumber(value) {
if (value == null) return 0;
if (typeof value === 'number') return value;
if (typeof value === 'boolean') return value ? 1 : 0;
const num = Number(value);
return isNaN(num) ? 0 : num;
}
function safeToString(value) {
if (value == null) return '';
if (typeof value === 'string') return value;
try {
return String(value);
} catch (e) {
return '';
}
}
// 使用示例
console.log(safeToNumber([1, 2])); // 0 (无法转换)
console.log(safeToNumber("123")); // 123
console.log(safeToString({})); // "[object Object]"8. 总结
引用数据类型转换为基本数据类型的核心原理：
-
ToPrimitive 抽象操作：JavaScript 引擎内部的核心转换机制
-
转换顺序 ：取决于上下文和
hint参数valueOf()→toString()（数字上下文）toString()→valueOf()（字符串上下文）
-
Symbol.toPrimitive：ES6 提供的自定义转换方法
-
内置对象差异：不同内置对象有不同的默认转换行为