类型转换与检测

类型转换的概念

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(null + 5); // 5 (null转为0)
console.log(undefined + 5); // NaN

比较运算中的转换

console.log("5" == 5); // true (字符串转为数字)
console.log("" == false); // true (空字符串和false都转为0)
console.log(null == undefined); // true
console.log("0" == false); // true

显式类型转换

开发者可以主动控制类型转换过程，这称为显式类型转换。JavaScript提供了多种方式进行显式转换。

转换为字符串

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
console.log(Boolean([])); // true
console.log(Boolean({})); // true

类型检测方法

准确检测变量类型是JavaScript开发中的重要技能，以下是常用的类型检测方法。

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 = [];
let obj = {};
let date = new Date();

console.log(arr instanceof Array); // true
console.log(obj instanceof Object); // true
console.log(date instanceof Date); // true
console.log(arr instanceof Object); // 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([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"

Array.isArray()

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

特殊值的类型转换

JavaScript中有几个特殊值在类型转换时表现出独特行为。

null和undefined的转换

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

NaN的特殊性

console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true
console.log(isNaN("text")); // true (会先尝试转换为数字)
console.log(Number.isNaN("text")); // false (不会进行类型转换)

对象到原始值的转换

对象到原始值的转换遵循特定的规则，这个过程更为复杂。

对象到字符串的转换

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

console.log(String(obj)); // "custom object"

对象到数字的转换

let obj = {
  valueOf() {
    return 42;
  }
};

console.log(Number(obj)); // 42

对象到布尔值的转换

let obj = {};
console.log(Boolean(obj)); // true (所有对象转为布尔值都是true)

严格相等与类型转换

严格相等运算符(===)不会进行类型转换，而宽松相等运算符(==)会。

console.log(5 === "5"); // false
console.log(5 == "5"); // true
console.log(null === undefined); // false
console.log(null == undefined); // true
console.log(0 === false); // false
console.log(0 == false); // true

类型转换的最佳实践

为了避免类型转换带来的问题，可以采用一些最佳实践方法。

显式转换优于隐式转换

// 不推荐
let total = "10" + 5; // "105"

// 推荐
let total = Number("10") + 5; // 15

使用严格相等比较

// 不推荐
if (value == 0) { ... }

// 推荐
if (value === 0) { ... }

处理边界情况

function safeParseInt(str) {
  if (typeof str !== "string" && typeof str !== "number") {
    return NaN;
  }
  return parseInt(str, 10);
}

类型转换在框架中的应用

现代JavaScript框架中经常需要处理类型转换问题。

React中的属性转换

function Component({ count }) {
  // 确保count是数字
  const numCount = Number(count) || 0;
  return <div>{numCount}</div>;
}

Vue中的v-model转换

export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: 0
    }
  },
  computed: {
    internalValue: {
      get() {
        return Number(this.modelValue);
      },
      set(value) {
        this.$emit('update:modelValue', Number(value));
      }
    }
  }
}

类型转换的性能考虑

不同类型的转换操作对性能有不同影响。

// 测试各种转换方式的性能
const iterations = 1000000;

console.time('Number()');
for (let i = 0; i < iterations; i++) {
  Number("123");
}
console.timeEnd('Number()');

console.time('parseInt()');
for (let i = 0; i < iterations; i++) {
  parseInt("123", 10);
}
console.timeEnd('parseInt()');

console.time('+ operator');
for (let i = 0; i < iterations; i++) {
  +"123";
}
console.timeEnd('+ operator');

类型转换与函数式编程

在函数式编程中，类型转换常被用于数据处理管道。

const data = ["1", "2", "3", "four", "5"];

// 安全转换为数字并过滤无效值
const numbers = data
  .map(Number)
  .filter(n => !isNaN(n));

console.log(numbers); // [1, 2, 3, 5]

类型转换在API交互中的应用

前后端交互时经常需要进行类型转换。

async function fetchUserData() {
  const response = await fetch('/api/user');
  const data = await response.json();
  
  // 转换API返回的数据类型
  return {
    ...data,
    id: Number(data.id),
    createdAt: new Date(data.createdAt),
    isActive: Boolean(data.isActive)
  };
}

自定义类型转换逻辑

有时需要实现自定义的类型转换逻辑。

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }
  
  valueOf() {
    return this.celsius;
  }
  
  toString() {
    return `${this.celsius}°C`;
  }
  
  toFahrenheit() {
    return this.celsius * 9/5 + 32;
  }
}

const temp = new Temperature(25);
console.log(temp + 5); // 30 (使用valueOf)
console.log(String(temp)); // "25°C"