下面给你一份 JavaScript 中将各种类型转换为字符串的所有方法 + 底层规则详解，涵盖 String()、toString()、模板字符串、隐式转换、Symbol、对象、数组、null/undefined、BigInt、JSON 等全场景。
内容结构清晰、可直接当笔记用。
✅ 一、JavaScript 中转换为字符串的 5 大方式
| 方法 | 是否安全 | 适用类型 | 说明 |
|---|---|---|---|
| String(value) | ✔ 安全 | 所有类型 | 推荐，能处理 null / undefined |
| value.toString() | ✘ 部分类型会报错 | null / undefined 会报错 | 对象可重写 |
模板字符串 ${value} | ✔ 安全 | 所有类型 | 常用于 UI 输出 |
| 隐式转换（value + ”） | ✔ 安全 | 所有类型 | 触发 ToPrimitive |
| JSON.stringify(value) | ✔ | 数组/对象等 | 常用于对象序列化，不用于通用转换 |
✅ 二、各种方式的详细行为
1️⃣ String(value) —— 最推荐、最安全
String(123) // "123"
String(true) // "true"
String(null) // "null"
String(undefined) // "undefined"
String(Symbol("x")) // "Symbol(x)"
✔ 可以处理 null / undefined（不会报错）
✔ 内部调用 ToString() 规范转换
✔ 对象会调用其 toString() 方法
2️⃣ value.toString() —— 不安全，但可控
❌ 两个类型会直接报错
null.toString() // 报错：Cannot read property 'toString'
undefined.toString() // 报错
✔ 数字、布尔值正常
(123).toString() // "123"
true.toString() // "true"
✔ 数组与对象
[1,2,3].toString() // "1,2,3"
({a:1}).toString() // "[object Object]"
✔ Symbol
Symbol("x").toString() // "Symbol(x)"
3️⃣ 模板字符串 ${value}
内部行为等同于：
String(value)
示例：
`${123}` // "123"
`${null}` // "null"
`${[1,2,3]}` // "1,2,3"
`${{a:1}}` // "[object Object]"
✔ 安全
✔ 推荐用于 UI 输出（如 Vue/React 模板）
4️⃣ 隐式转换（value + ”）
只要遇到字符串运算，会试图把其他类型变成字符串。
123 + '' // "123"
true + '' // "true"
null + '' // "null"
undefined + '' // "undefined"
并且：
对象 → ToPrimitive → toString → valueOf
示例：
{} + '' // "[object Object]"
数组：
[1,2,3] + '' // "1,2,3"
[] + '' // ""
5️⃣ JSON.stringify(value)（不是通用转换函数）
它主要用来将对象序列化：
JSON.stringify({a:1}) // '{"a":1}'
JSON.stringify([1,2]) // "[1,2]"
但它也能处理基础类型：
JSON.stringify(123) // "123"
JSON.stringify("abc") // "\"abc\""
JSON.stringify(null) // "null"
❗ 注意不可序列化：
| 值 | 转换结果 |
|---|---|
undefined | 被忽略或变 null |
function | 被忽略 |
Symbol | 被忽略 |
循环引用 | 报错 |
✅ 三、各种类型的转换规则（最底层 ToString 规范）
⭐ Number → String
| 输入 | 输出 |
|---|---|
| 123 | "123" |
| 0 | "0" |
| -0 | "0" |
| NaN | "NaN" |
| Infinity | "Infinity" |
⭐ Boolean → String
true → "true"
false → "false"
⭐ null / undefined
String(null) // "null"
String(undefined) // "undefined"
⭐ Symbol
String(Symbol("x")) → "Symbol(x)"
Symbol() 无法隐式转换：
Symbol() + '' // ❌ TypeError
⭐ BigInt
String(10n) → "10"
但 不能隐式转换
10n + '' // ❌ TypeError: Cannot convert BigInt to string
⭐ Array → String
规则：每个元素转为字符串 → 逗号拼接
[1,2,3].toString() // "1,2,3"
[].toString() // ""
[null].toString() // "" （null 变成空字符串）
[undefined].toString() // ""
⭐ Object → String
默认行为：
({a:1}).toString() // "[object Object]"
除非你重写：
const obj = {
toString() { return "Hello"; }
}
String(obj) // "Hello"
✅ 四、推荐使用方式（项目最佳实践）
| 场景 | 推荐方式 |
|---|---|
| 通用转换 | ✔ String(value) |
| UI 展示（Vue/React） | ✔ 模板字符串 ${value} |
| 需要自定义对象输出 | ✔ 自己写 obj.toString() |
| 序列化传输（API） | ✔ JSON.stringify |
| 代码性能要求 | ✔ value + ''（最快） |
🎯 总结表：各种类型的转换结果
| 值 | String() | toString() | ${} | + ” | JSON.stringify |
|---|---|---|---|---|---|
| 123 | “123” | “123” | “123” | “123” | “123” |
| true | “true” | “true” | “true” | “true” | “true” |
| null | “null” | ❌报错 | “null” | “null” | “null” |
| undefined | “undefined” | ❌报错 | “undefined” | “undefined” | undefined |
| Symbol(“x”) | “Symbol(x)” | “Symbol(x)” | “Symbol(x)” | ❌报错 | undefined |
| 10n | “10” | “10” | “10” | ❌报错 | “10” |
| [1,2] | “1,2” | “1,2” | “1,2” | “1,2” | “[1,2]” |