JSON.stringify 详解：把 JavaScript 对象变成 JSON 字符串

JSON.stringify 详解：把 JavaScript 对象变成 JSON 字符串

一、一句话定义

JSON.stringify() 是 JavaScript 内置方法，作用是把 JavaScript 对象或值转换成 JSON 格式的字符串。

let user = { id: 1, name: "jack" };
let str = JSON.stringify(user);
console.log(str); // '{"id":1,"name":"jack"}'

转换前是对象，转换后是字符串。控制台里对象可以展开查看，字符串只能看到一串文本。

---

二、为什么需要它

1. 调试时查看对象内容

在 Axios 场景里：

let response = await axios.get("msg");
console.log(response.data);

如果 response.data 是对象，控制台会显示一个可展开的对象。在某些场景下（比如把内容拼接到文本、写入日志、复制到剪贴板），对象会被转成 [object Object]，看不到实际内容。

console.log("响应数据：" + response.data);
// 输出：响应数据：[object Object]

用 JSON.stringify 转成字符串后，内容就完整可见：

console.log("响应数据：" + JSON.stringify(response.data));
// 输出：响应数据：{"id":1,"name":"jack"}

2. 把对象写入 textContent

msgDiv.textContent = response.data;

如果 response.data 是对象，页面上会显示 [object Object]。改用：

msgDiv.textContent = JSON.stringify(response.data);

页面上显示：

{"id":1,"name":"jack"}

3. 发送请求时手动序列化

虽然 Axios 会自动把对象序列化成 JSON，但用原生 fetch 时需要手动处理：

fetch("/api/user", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username: "jack", age: 25 })
});

body 只接受字符串、FormData、Blob 等，不能直接传对象。必须先用 JSON.stringify 转成字符串。

4. 存储到 localStorage

localStorage 只能存字符串：

localStorage.setItem("user", JSON.stringify(user));

读取时再用 JSON.parse 还原：

let user = JSON.parse(localStorage.getItem("user"));

---

三、基本用法

1. 对象转字符串

JSON.stringify({ id: 1, name: "jack" });
// '{"id":1,"name":"jack"}'

2. 数组转字符串

JSON.stringify([1, 2, 3]);
// '[1,2,3]'

3. 嵌套对象

JSON.stringify({
    id: 1,
    address: { city: "北京", district: "海淀" }
});
// '{"id":1,"address":{"city":"北京","district":"海淀"}}'

4. 基本类型

JSON.stringify("hello");  // '"hello"'
JSON.stringify(123);      // '123'
JSON.stringify(true);     // 'true'
JSON.stringify(null);     // 'null'

注意字符串会被加上双引号，因为 JSON 字符串本身需要引号包裹。

---

四、三个参数

JSON.stringify(value, replacer, space)

参数	作用
value	要转换的值
replacer	过滤或转换字段，可选
space	缩进空格数，可选，用于格式化输出

1. space：格式化输出

let user = { id: 1, name: "jack" };

JSON.stringify(user);
// '{"id":1,"name":"jack"}'

JSON.stringify(user, null, 2);
// '{
//   "id": 1,
//   "name": "jack"
// }'

调试时用 space 参数可以让输出更易读。space 可以是数字（最多 10）或字符串（如 "\t"）。

2. replacer：过滤字段

传数组，只保留指定字段：

let user = { id: 1, name: "jack", password: "123456" };

JSON.stringify(user, ["id", "name"]);
// '{"id":1,"name":"jack"}'

password 被过滤掉，常用于日志脱敏。

传函数，自定义转换规则：

JSON.stringify(user, function (key, value) {
    if (key === "password") {
        return "***";
    }
    return value;
});
// '{"id":1,"name":"jack","password":"***"}'

---

五、JSON.stringify 和 JSON.parse 的关系

两者是一对反向操作：

方法	方向	示例
JSON.stringify	对象 → 字符串	{a:1} → '{"a":1}'
JSON.parse	字符串 → 对象	'{"a":1}' → {a:1}

let obj = { id: 1, name: "jack" };
let str = JSON.stringify(obj);   // 序列化
let obj2 = JSON.parse(str);      // 反序列化

一句话记忆：stringify 是"打包"，parse 是"拆包"。

---

六、Axios 场景中的具体作用

回到之前的代码：

let response = await axios.get("msg");
msgDiv.textContent = response.data;

如果后端返回的是对象：

{"id":1,"name":"jack"}

response.data 是 JavaScript 对象，直接赋给 textContent 会显示：

[object Object]

改成：

msgDiv.textContent = JSON.stringify(response.data);

页面显示：

{"id":1,"name":"jack"}

这就是 JSON.stringify(response.data) 在实际调试中的用途：把对象转成可读的 JSON 字符串，方便显示或打印。

---

七、常见坑

1. undefined、函数、Symbol 会被忽略

JSON.stringify({ a: 1, b: undefined, c: function () {}, d: Symbol() });
// '{"a":1}'

对象属性值为 undefined、函数、Symbol 时，该属性会被直接丢弃。

如果数组里有这些值，会被转成 null：

JSON.stringify([1, undefined, function () {}]);
// '[1,null,null]'

2. 循环引用会报错

let obj = {};
obj.self = obj;
JSON.stringify(obj);
// TypeError: Converting circular structure to JSON

对象互相引用形成闭环时，JSON.stringify 会抛异常。需要先断开循环引用，或用 replacer 过滤。

3. Date 会被转成字符串

JSON.stringify({ date: new Date("2026-10-29") });
// '{"date":"2026-10-29T00:00:00.000Z"}'

Date 对象会被自动转成 ISO 格式字符串。如果需要自定义格式，用 replacer 处理。

4. toJSON 方法会被调用

如果对象定义了 toJSON() 方法，JSON.stringify 会优先调用它：

let obj = {
    name: "jack",
    toJSON: function () {
        return { displayName: this.name };
    }
};

JSON.stringify(obj);
// '{"displayName":"jack"}'

5. 中文不会乱码，但某些字符会被转义

JSON.stringify({ name: "张三" });
// '{"name":"张三"}'

JSON.stringify 默认保留中文。如果输出到某些环境出现 Unicode 转义（如 \u5f20\u4e09），那是环境处理，不是 JSON.stringify 的问题。

---

八、完整示例

1. 调试 Axios 响应

loadMsgBtn.addEventListener("click", async function () {
    try {
        let response = await axios.get("msg");
        msgDiv.textContent = JSON.stringify(response.data);
    } catch (e) {
        console.log(e);
    }
});

2. 格式化输出便于阅读

console.log(JSON.stringify(response.data, null, 2));

输出：

{
  "id": 1,
  "name": "jack"
}

3. 脱敏后打印

console.log(JSON.stringify(user, function (key, value) {
    if (key === "password") {
        return "***";
    }
    return value;
}));

---

九、记忆方法

1. 一句话口诀

stringify 打包，parse 拆包；
对象变字符串，字符串变对象。

2. 三个参数口诀

值、过滤、缩进；
replacer 管字段，space 管格式。

3. 使用场景口诀

调试看对象，用 stringify；
发送请求体，用 stringify；
存储 localStorage，用 stringify。

4. 和 parse 对比记

stringify：对象 → 字符串（序列化）
parse：字符串 → 对象（反序列化）

5. 常见坑口诀

undefined、函数、Symbol 会丢；
循环引用会报错；
Date 变 ISO 字符串。

---

十、总结

维度	说明
作用	JavaScript 对象或值 → JSON 字符串
常用场景	调试打印、写入 textContent、发送请求体、存 localStorage
参数	value、replacer（过滤字段）、space（格式化缩进）
反向方法	JSON.parse，字符串 → 对象
常见坑	undefined/函数/Symbol 被忽略、循环引用报错、Date 转 ISO 字符串
在 Axios 中的用途	把 response.data 对象转成可读字符串，避免显示 [object Object]

JSON.stringify 的核心就是"把对象变成字符串"。调试时看不到对象内容、页面显示 [object Object]、发送请求体需要字符串、存 localStorage 只能存字符串，这些场景都靠它。记住"stringify 打包、parse 拆包"，再记住"replacer 管字段、space 管格式"，这个方法的用法就清楚了。