vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue String()  .toString()区别

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

作者：半花

本文主要介绍了Vue中String()和.toString()的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

想了解 String() 全局函数和 .toString() 方法的区别，这是 JavaScript 中常见的类型转换知识点，我会从用法、兼容性、边界场景三个维度帮你讲清楚，新手也能轻松理解。

核心区别总览

表格

特性String() 全局函数.toString() 方法
调用方式函数调用（String(xxx)）实例方法调用（xxx.toString()）
空值处理可处理 null/undefined（不报错）处理 null/undefined 直接报错
原始值处理直接转换原始值（如数字、布尔）原始值会先装箱为对象，再调用方法
返回结果所有合法输入都返回字符串仅非空值能返回字符串，空值抛错
适用场景不确定值是否为 null/undefined 时确定值为非空原始值 / 对象时

总结

具体用法&差异详解

处理null/undefined（最核心区别）

这是两者最关键的差异，也是实际开发中最容易踩坑的点：

// 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"

底层差异：String(123) 直接转换原始数字；(123).toString() 会先把 123 装箱为 Number 对象（new Number(123)），再调用对象的 toString() 方法。

处理对象（数组、普通对象）

// 数组 
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()); // ""

实际开发中的选择建议

优先用String()

当你不确定要转换的值是否为 null/undefined 时（比如接口返回值、用户输入、变量可能未初始化），String() 更安全，不会报错。

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

用.toString()的场景

当你明确知道值是非空的原始值 / 对象时（比如数字、数组），可以用 .toString()，语义更清晰。

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

补充：Number.prototype.toString(radix) 支持传入进制参数（2-36），这是 String() 没有的功能。

到此这篇关于Vue中String() 和 .toString()的区别小结的文章就介绍到这了,更多相关Vue String()  .toString()区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文