JS中JSON.stringify、toString与模板字符串转换对象的区别

作者：闭包旅人时间：2026-11-03 11:42:16浏览：413

深入解析JavaScript中JSON.stringify、toString与模板字符串转换对象的核心机制、底层执行流程、常见陷阱与场景选型。

将 JavaScript 对象转换为字符串是日常开发中最频繁的操作之一，但在控制台调试、日志打印或接口数据组装时，许多开发者常会意外看到 [object Object]。产生这一现象的根本原因，在于 JSON.stringify、toString 与模板字符串虽然都能把对象“变成字符串”，但它们的设计初衷、规范算法和内部求值路径有着本质的不同。

图 0：三种对象转换形式的输出差异直观概览

一、核心结论：三种方式的定位与产出差异

在深入底层机制之前，我们可以先建立直观的结论框架：

JSON.stringify(obj)：结构化数据序列化。它以 JSON 语法规范为准绳，深度遍历对象的自身可枚举属性，将对象的实际键值对结构展开为字符串。它的目标是数据的跨平台传输与持久化存储。
obj.toString()：原型链类型标签解析。它是原型链方法。普通对象的默认实现继承自 Object.prototype.toString，返回的是表征内部类型的字符串 "[object Object]"，不会遍历属性。它的目标是类型描述或对象特定格式输出。
模板字符串 `${obj}`：ECMAScript 隐式类型转换流水线。它是一个语法结构，在运行时会强制触发抽象操作 ToPrimitive(obj, hint: "string")。对于未重写转换逻辑的普通对象，它最终回退调用 obj.toString()，因而产生类似 "用户: [object Object]" 的拼接结果。

图 1：三种转换手段底层机制、信息维度与适用场景横向比对

二、toString 的运作本质：原型链与类型识别

在 JavaScript 中，任何直接由字面量 {} 或 new Object() 创建的对象，其原型链终点均指向 Object.prototype。

当直接对对象执行 obj.toString() 时，JS 引擎沿着原型链查找到 Object.prototype.toString()。根据 ECMAScript 规范，该方法会检查传入参数的内部插槽 [[Class]] 或 Symbol.toStringTag 属性，并格式化为 [object Tag] 的形式返回。

const user = { name: "Alice", age: 25 };

// 默认行为：打印类型标签
console.log(user.toString()); 
// 示例输出: "[object Object]"

// 内置类型的不同实现：很多原生类重写了 toString
const arr = [1, 2, 3];
console.log(arr.toString()); 
// 示例输出: "1,2,3"（Array.prototype 重写了 toString）

const date = new Date("2026-01-01");
console.log(date.toString()); 
// 示例输出: "Thu Jan 01 2026 08:00:00 GMT+0800 (中国标准时间)"

经典技巧：精确类型判断

通过借用 Object.prototype.toString.call(target)，可以避开子类重写的干扰，精准获取各类对象的真实类型标记，例如 [object Array]、[object Map]、[object Null]。

三、模板字符串的执行本质：ToPrimitive 规范流

很多开发者容易误以为“模板字符串内部就是直接调用了 .toString()”。这种理解在多数普通对象场景下表现相同，但从语言规范上看并不严谨。

在 ECMAScript 规范中，模板字面量求值时，对表达式执行的是抽象操作 ToString(argument)。如果参数是对象，必须首先通过 ToPrimitive(argument, hint: "string") 将其降级为原始类型（Primitive），随后再将该原始值转为字符串。

图 2：模板字符串求值时遵循的 ToPrimitive(hint: "string") 算法决策全流程

从图 2 可以看出，模板字符串的灵活性远高于简单的属性访问。只要为对象配置了 [Symbol.toPrimitive]，就拥有了最高的转换优先级：

const account = {
  name: "Bob",
  balance: 1000,
  [Symbol.toPrimitive](hint) {
    if (hint === "string") {
      return `账户(${this.name})`;
    }
    return this.balance;
  }
};

// 模板字符串强制触发 hint: "string"
console.log(`当前用户为: ${account}`); 
// 示例输出: "当前用户为: 账户(Bob)"

// 数学运算强制触发 hint: "number"
console.log(account + 50); 
// 示例输出: 1050

四、JSON.stringify 的运作本质：结构化序列化

不同于前两者仅获取单一标量字符串，JSON.stringify 是真正能够保留对象内部完整拓扑结构的工具。

它递归扫描对象所有自身可枚举（enumerable）属性，并严格按照 JSON 规范进行数据格式化。但也正由于严格受制于 JSON 数据类型规范，JSON.stringify 存在几个极为关键的处理规则与陷阱。

图 3：JSON.stringify 内部序列化管道与边界规则

我们可以通过一段代码直观观察 JSON.stringify 对特殊类型的处理方式：

const data = {
  title: "Task",
  fn: () => {},            // 函数
  extra: undefined,        // undefined
  tag: Symbol("id"),        // Symbol
  list: [undefined, () => {}, 42]
};

console.log(JSON.stringify(data));
// 示例输出: '{"title":"Task","list":[null,null,42]}'
// 注意：fn、extra、tag 在对象中被直接抹去，而在数组中转为了 null

五、全维度对比与场景选型

在实际工程开发中，选择哪种方式取决于具体的业务意图。下表总结了三者的核心能力边界：

特性维度	JSON.stringify(obj)	obj.toString()	`${obj}` (模板字符串)
输出结果	完整 JSON 格式键值字符串	默认 `"[object Object]"`	默认 `"[object Object]"`
深层属性遍历	是（深度递归直到叶子节点）	否（仅执行原型链顶层方法）	否（只对根对象做 ToPrimitive 转换）
循环引用处理	抛出 `TypeError` 异常	正常输出（不访问子属性）	正常输出（不访问子属性）
可定制性	支持 `toJSON`、`replacer`、`space`	重写 `toString` 或 `Symbol.toStringTag`	支持 `[Symbol.toPrimitive]`
主要用途	数据传输、持久化、结构化日志	类型探测、特定类的格式化	UI文本拼接、日志插值文案

图 4：对象转换场景选型决策指南

六、实践建议与避坑要点

控制台输出避免模板字符串直接拼接：在调试对象时，不要写 console.log(`用户数据: ${user}`)，这会导致终端只显示 用户数据: [object Object]。推荐写成多参数形式 console.log("用户数据:", user)，由控制台原生展开交互式对象树；或者显式使用 console.log(`用户数据: ${JSON.stringify(user, null, 2)}`) 进行格式化输出。
防范循环引用导致的异常崩溃：若对象存在父子双向引用或 DOM 节点引用，直接使用 JSON.stringify 会抛出无法序列化的运行时错误。在不确定对象拓扑时，应配合自定义 replacer 或 WeakSet 进行去环处理。
利用 Symbol.toPrimitive 统一转换规则：当编写自定义业务类（如 Money、Point、Duration）时，同时提供 toString() 与 [Symbol.toPrimitive]，能让对象在模板字符串拼接、隐式加减和显式类型转换中保持一致可控的输出结果。