类型转换与检测

类型转换的概念

JavaScript中的类型转换指的是将一种数据类型转换为另一种数据类型的过程。由于JavaScript是弱类型语言，类型转换经常在代码执行过程中自动发生，也可能通过显式操作触发。理解类型转换的机制对于避免潜在错误至关重要。

let num = 42;
let str = String(num); // 显式转换为字符串
console.log(typeof str); // "string"

let result = "5" * 2; // 隐式转换为数字
console.log(result); // 10

隐式类型转换

隐式类型转换是JavaScript引擎自动执行的转换，通常发生在运算符操作或比较时。

算术运算中的转换

console.log("10" - 5); // 5，字符串转为数字
console.log("10" + 5); // "105"，数字转为字符串
console.log(true + 1); // 2，布尔值转为数字

比较运算中的转换

console.log("5" == 5); // true，字符串转为数字比较
console.log("" == false); // true，空字符串和false都转为0
console.log(null == undefined); // true，特殊规则

显式类型转换

开发者可以主动使用各种方法进行类型转换。

转换为字符串

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(typeof str1, typeof str2, typeof str3); // 都是string

转换为数字

let str = "3.14";
let num1 = Number(str);
let num2 = +str;
let num3 = parseInt(str);
let num4 = parseFloat(str);

console.log(num1, num2, num3, num4); // 都是3.14或3

转换为布尔值

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean("hello")); // true
console.log(Boolean(1)); // true

类型检测方法

准确判断变量类型是开发中的常见需求。

typeof运算符

console.log(typeof 42); // "number"
console.log(typeof "text"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (历史遗留问题)
console.log(typeof []); // "object"
console.log(typeof {}); // "object"
console.log(typeof function(){}); // "function"

instanceof运算符

let arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

function Person() {}
let p = new Person();
console.log(p instanceof Person); // true

Object.prototype.toString

console.log(Object.prototype.toString.call(42)); // "[object Number]"
console.log(Object.prototype.toString.call("text")); // "[object String]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"

Array.isArray()

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

特殊类型转换案例

对象到原始值的转换

let obj = {
  valueOf() {
    return 42;
  },
  toString() {
    return "custom object";
  }
};

console.log(obj + 1); // 43，优先调用valueOf
console.log(String(obj)); // "custom object"，优先调用toString

日期对象的转换

let date = new Date();
console.log(date.toString()); // "Wed May 01 2024 12:00:00 GMT+0800"
console.log(date.valueOf()); // 时间戳数字
console.log(+date); // 时间戳数字

JSON转换

let data = {
  name: "John",
  age: 30,
  toJSON() {
    return { name: this.name };
  }
};

console.log(JSON.stringify(data)); // '{"name":"John"}'

类型转换的最佳实践

避免隐式转换的陷阱

// 使用严格相等避免类型转换
console.log("5" === 5); // false

// 明确转换意图
let input = "123";
let num = Number(input); // 比+input更明确
if (!isNaN(num)) {
  console.log("Valid number:", num);
}

处理边界情况

// 处理可能的null/undefined
function safeToString(value) {
  return value == null ? "" : String(value);
}

// 安全的数值转换
function safeToNumber(value) {
  let num = Number(value);
  return isNaN(num) ? 0 : num;
}

自定义类型转换

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }
  
  valueOf() {
    return this.celsius;
  }
  
  toString() {
    return `${this.celsius}°C`;
  }
  
  [Symbol.toPrimitive](hint) {
    if (hint === "string") {
      return this.toString();
    }
    return this.valueOf();
  }
}

let temp = new Temperature(25);
console.log(temp + 5); // 30
console.log(String(temp)); // "25°C"