下面给你一份 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]”