Vue中String() 和 .toString()的区别小结

// 1. String() 处理 null/undefined → 不报错，返回对应字符串 
console.log(String(null)); // "null" 
console.log(String(undefined)); // "undefined" 

// 2. .toString() 处理 null/undefined → 直接抛 TypeError 
console.log(null.toString()); // Uncaught TypeError: Cannot read properties of null (reading 'toString') 
console.log(undefined.toString());// Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

// 数字 
console.log(String(123)); // "123" 
console.log((123).toString()); // "123" 

// 布尔 
console.log(String(true)); // "true" 
console.log(true.toString()); // "true" 

// 空字符串 
console.log(String('')); // "" 
console.log(''.toString()); // "" 

// 特殊数字（NaN/Infinity） 
console.log(String(NaN)); // "NaN" 
console.log(NaN.toString()); // "NaN"

// 数组 
const arr = [1, 2, 3];
console.log(String(arr)); // "1,2,3" 
console.log(arr.toString()); // "1,2,3" 

// 普通对象 
const obj = { a: 1 };
console.log(String(obj)); // "[object Object]" 
console.log(obj.toString()); // "[object Object]" 

// 自定义对象（重写 toString） 
const customObj = { 
  toString() { 
    return "自定义字符串";
  } 
}; 
console.log(String(customObj)); // "自定义字符串" 
console.log(customObj.toString());// "自定义字符串"

// 空字符串 
console.log(String('')); // "" 
console.log(''.toString()); // "" 

// 0/空数组 
console.log(String(0)); // "0" 
console.log((0).toString()); // "0" 
console.log(String([])); // "" 
console.log([].toString()); // ""

// 示例：处理接口返回的可能为空的值 
const res = { data: null }; 
const str = String(res.data); // "null"（不报错）

// 示例：数字转指定进制字符串（toString 支持参数，String 不支持） 
console.log((10).toString(2)); // "1010"（转二进制） 
console.log((10).toString(16)); // "a"（转十六进制）