String() 和 .toString()的区别

String().toString() 都是把值转成字符串的常见方式,但它们在 调用方式、可用性、返回结果 上有明显区别。下面我用通俗的方式帮你彻底讲清楚👇


💡 一句话总结

对比项 String() .toString()
类型 函数(全局函数) 方法(对象实例的方法)
能否处理 null / undefined ✅ 可以 ❌ 报错
调用方式 String(value) value.toString()
返回结果 返回值的字符串形式 返回对象自带的字符串表示
典型用途 更安全地转字符串 已知是对象或数字时调用更简洁

🧩 一、String() 是全局函数

它可以安全地转换任何类型 为字符串,包括 nullundefined

scss 复制代码
String(123)        // '123'
String(true)       // 'true'
String(null)       // 'null'
String(undefined)  // 'undefined'
String({ a: 1 })   // '[object Object]'

📘 内部逻辑(简化版):

  • 如果是 nullundefined → 直接返回 'null' / 'undefined'
  • 否则 → 调用对象的 .toString() 方法

🧱 二、.toString() 是对象的方法

它是定义在大多数对象原型上的方法,比如:

  • Number.prototype.toString()
  • Boolean.prototype.toString()
  • Array.prototype.toString()
  • Object.prototype.toString()

不能对 nullundefined 调用,否则直接报错 ⚠️

scss 复制代码
(123).toString()       // '123'
true.toString()        // 'true'
[1, 2, 3].toString()   // '1,2,3'
({a:1}).toString()     // '[object Object]'

null.toString()        // ❌ TypeError: Cannot read properties of null
undefined.toString()   // ❌ TypeError: Cannot read properties of undefined

🎯 三、什么时候用哪个?

使用场景 推荐方法
不确定值是不是 null/undefined ✅ 用 String(value)(更安全)
明确是数字、布尔值、数组等 ✅ 用 .toString()(更语义化)
想格式化对象内容 JSON.stringify(value) 更合适

⚙️ 举个综合例子:

javascript 复制代码
const values = [123, true, null, undefined, [1,2], {x:1}];

values.forEach(v => {
  console.log('String():', String(v));
  console.log('toString():', v?.toString?.() ?? '❌ 无 toString 方法');
  console.log('---');
});

输出:

yaml 复制代码
String(): 123
toString(): 123
---
String(): true
toString(): true
---
String(): null
toString(): ❌ 无 toString 方法
---
String(): undefined
toString(): ❌ 无 toString 方法
---
String(): 1,2
toString(): 1,2
---
String(): [object Object]
toString(): [object Object]

✅ 总结

项目 String() .toString()
调用方式 函数调用 方法调用
是否安全 安全(支持 null/undefined) 不安全
适合场景 通用转换 明确类型时使用
结果差异 基于类型的默认规则 调用该对象原型链上的方法

相关推荐
xiaotao1312 小时前
第九章:Vite API 参考手册
前端·vite·前端打包
午安~婉2 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
哈里谢顿2 小时前
如何实现分布式锁
面试
彧翎Pro2 小时前
基于 RO1 noetic 配置 robosense Helios 32(速腾) & xsense mti 300
前端·jvm
小码哥_常2 小时前
解锁系统设置新姿势:Activity嵌入全解析
前端
之歆3 小时前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶3 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐3 小时前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅3 小时前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏3 小时前
Next.js 13变化有多大?
前端·react·nextjs