JSON.stringify用法详解，前端开发中的实用技巧

ref="/tag/2023/" style="color:#479099;font-weight:bold;">JSON.stringify是什么？

在写网页的时候，经常需要把一些数据发给服务器，比如用户填写的表单信息、设置的偏好选项。但JavaScript里的对象或数组不能直接发送，得先转成字符串。这时候就轮到JSON.stringify出场了。

它是一个JavaScript内置的方法，作用是把JavaScript对象、数组、数字、字符串等数据类型转换成JSON格式的字符串。

基本用法

最简单的用法就是传一个对象进去：

const user = { name: "张三", age: 25, city: "北京" };
const str = JSON.stringify(user);
console.log(str); // {"name":"张三","age":25,"city":"北京"}

可以看到，原本的JS对象变成了纯文本的JSON字符串，这种格式通用性很强，几乎所有编程语言都能解析。

处理数组也一样

不只是对象，数组也能转：

const colors = ["红", "绿", "蓝"];
const colorStr = JSON.stringify(colors);
console.log(colorStr); // ["红","绿","蓝"]

这样数组就变成了JSON数组字符串，方便在网络上传输。

过滤字段：第二个参数的作用

有时候你不想把整个对象都转出去，比如用户信息里有密码字段，就不能随便传。这时可以用JSON.stringify的第二个参数来筛选。

const user = {
  name: "李四",
  password: "123456",
  email: "li.si@example.com"
};

const safeStr = JSON.stringify(user, ["name", "email"]);
console.log(safeStr); // {"name":"李四","email":"li.si@example.com"}

第二个参数传一个数组，列出你想保留的属性名，其他字段就会被自动忽略。

美化输出：让字符串更易读

如果想把生成的字符串打印出来看看结构，可以加上第三个参数，让它带上缩进，更清晰。

const data = { a: 1, b: { c: 2, d: 3 } };
const pretty = JSON.stringify(data, null, 2);
console.log(pretty);
// {
//   "a": 1,
//   "b": {
//     "c": 2,
//     "d": 3
//   }
// }

第三个参数设为2，表示用两个空格做缩进，调试时特别有用。

注意特殊情况

有些值在转换时会被自动处理掉。比如undefined、函数、Symbol这些，JSON标准不支持，会被忽略。

const obj = {
  name: "王五",
  fn: function() {},
  meta: undefined
};

console.log(JSON.stringify(obj)); // {"name":"王五"}

函数和undefined都没了。所以在传数据前，得确认哪些字段真正需要。

实际应用场景

比如你在做一个记事本小功能，用户关掉页面前想保存当前内容。可以用localStorage存数据，但它只接受字符串。

const note = { title: "购物清单", items: ["牛奶", "面包"] };
localStorage.setItem("lastNote", JSON.stringify(note));

// 下次打开时读取
const saved = localStorage.getItem("lastNote");
if (saved) {
  const noteData = JSON.parse(saved);
  console.log(noteData.title); // 购物清单
}

这就是JSON.stringify最常见的用途之一：把数据存起来，下次还能还原。

再比如用fetch发POST请求， body通常要转成JSON字符串：

fetch('/api/save', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ text: '这是提交的内容' })
});

服务器接收到的就是标准JSON，能顺利解析。