json转字符串如何使用

轻松JSON转字符串：从原理到实践，一文搞定！

在JavaScript开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，广泛应用于前后端数据交互、配置文件存储等场景，而将JSON对象转换为字符串（即“序列化”）是处理数据时的常见需求——通过AJAX发送数据到服务器时，需要将对象转为字符串格式；或存储数据到localStorage时，也需先转换为字符串，本文将从“为什么需要转换”出发，详解JSON转字符串的核心方法、使用场景及注意事项,助你彻底这一技能。

为什么需要将JSON转为字符串？

JSON本质上是JavaScript对象的一种文本表示形式，但浏览器或服务器无法直接传输“对象”本身，只能传输文本（字符串），当需要跨平台、跨网络传递数据时，必须将JSON对象转换为字符串格式。

• 前端通过fetch或axios发送POST请求时，请求体中的数据需转为JSON字符串；
• 将复杂对象存储到localStorage或sessionStorage时，因其只能存储字符串，需先序列化；
• 后端接口返回JSON数据时，本质也是以字符串形式传输（如HTTP响应体中的JSON.stringify()结果）。

核心方法：JSON.stringify()

JavaScript原生提供了JSON.stringify()方法，用于将JavaScript对象或数组转换为JSON字符串，其基本语法如下：

JSON.stringify(value, replacer, space)

参数说明：

• value：必填，要转换的JavaScript对象、数组或基本类型（如字符串、数字等）；
• replacer：可选，用于控制转换过程的函数或数组，可过滤或转换属性值；
• space：可选，格式化输出时的缩进字符串或数字，用于美化结果（如调试时查看结构）。

基础用法：从简单对象到字符串

转换普通对象

假设有一个简单的JavaScript对象，直接调用JSON.stringify()即可转为字符串：

const user = {
  name: "张三",
  age: 25,
  isAdmin: false
};
const jsonString = JSON.stringify(user);
console.log(jsonString); 
// 输出: {"name":"张三","age":25,"isAdmin":false}

jsonString是一个标准的JSON格式字符串，属性名和字符串值均被双引号包裹（单引号会导致非标准格式）。

转换数组

数组同样适用该方法，转换后保留数组的顺序和元素结构：

const fruits = ["苹果", "香蕉", { type: "热带", name: "芒果" }];
const jsonStr = JSON.stringify(fruits);
console.log(jsonStr); 
// 输出: ["苹果","香蕉",{"type":"热带","name":"芒果"}]

处理基本类型

对于基本数据类型，JSON.stringify()的规则如下：

• 数字、布尔值、null：直接转为字符串形式（如123→"123"，true→"true"，null→"null"）；
• 字符串：会被双引号包裹（如"hello"→"\"hello\""，实际输出为"hello"）；
• undefined、函数、Symbol：会被忽略（在对象中）或转为null（在数组中）。

示例：

console.log(JSON.stringify(123));        // "123"
console.log(JSON.stringify("abc"));      // "abc"（实际输出为"abc"，双引号是字符串的一部分）
console.log(JSON.stringify(undefined)); // "undefined"（注意：单独转换undefined时输出"undefined"，但在对象中会被忽略）

进阶用法：通过replacer和space控制输出

使用replacer函数过滤或转换属性

replacer可以是一个函数，对每个属性值进行预处理，返回undefined则忽略该属性：

const data = {
  name: "李四",
  password: "123456",
  hobbies: ["读书", "游泳"]
};
// 过滤掉password属性，并将hobbies数组转为大写
const jsonStr = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // 忽略password
  if (key === "hobbies") return value.map(item => item.toUpperCase());
  return value;
});
console.log(jsonStr); 
// 输出: {"name":"李四","hobbies":["读书","游泳"]}（注意：hobbies数组未成功转换，因map需返回新数组，示例中需修正）
// 修正后：hobbies数组转为大写应为 ["读书", "游泳"] → 因中文大小写转换需特殊处理，此处仅展示过滤逻辑

replacer也可以是一个字符串数组，指定需要保留的属性名：

const jsonStr = JSON.stringify(data, ["name", "hobbies"]);
console.log(jsonStr); 
// 输出: {"name":"李四","hobbies":["读书","游泳"]}（仅保留name和hobbies）

使用space格式化输出

space参数可让输出的JSON字符串更易读，调试时非常实用，它可以是：

• 数字：表示缩进空格数（最大10，超过10按10处理）；
• 字符串：用该字符串作为缩进（如"\t"表示制表符）。

示例：

const user = {
  name: "王五",
  address: { city: "北京", district: "朝阳区" },
  hobbies: ["跑步", "编程"]
};
// 用2个空格缩进
const jsonStr1 = JSON.stringify(user, null, 2);
console.log(jsonStr1);
/* 输出:
{
  "name": "王五",
  "address": {
    "city": "北京",
    "district": "朝阳区"
  },
  "hobbies": [
    "跑步",
    "编程"
  ]
}
*/
// 用制表符缩进
const jsonStr2 = JSON.stringify(user, null, "\t");
console.log(jsonStr2);
/* 输出:
{
    "name": "王五",
    "address": {
        "city": "北京",
        "district": "朝阳区"
    },
    "hobbies": [
        "跑步",
        "编程"
    ]
}
*/

注意事项：这些“坑”要避开

循环引用导致的错误

如果对象中存在循环引用（对象的某个属性指向自身），JSON.stringify()会抛出TypeError：

const obj = {};
obj.self = obj; // 循环引用
console.log(JSON.stringify(obj)); // 报错: "TypeError: Converting circular structure to JSON..."

解决方法：需手动处理循环引用，或使用第三方库（如flatted、circular-json）。

函数和Symbol属性会被忽略

对象中的函数或Symbol属性在序列化时会被直接丢弃，不会出现在结果字符串中：

const data = {
  name: "赵六",
  sayHi: function() { console.log("hi"); },
  [Symbol("id")]: 123
};
console.log(JSON.stringify(data)); // 输出: {"name":"赵六"}

若需保留函数或Symbol，需提前将其转为可序列化的格式（如字符串）。

日期对象会被转为ISO字符串

日期对象会被自动转换为ISO格式的字符串（Date.toISOString()的结果）：

const event = {
  name: "会议",
  time: new Date("2023-10-01T10:00:00Z")
};
console.log(JSON.stringify(event)); 
// 输出: {"name":"会议","time":"2023-10-01T10:00:00.000Z"}

若需自定义日期格式，可先用replacer处理日期对象：

const jsonStr = JSON.stringify(event, (key, value) => {
  if (value instanceof Date) {
    return value.toLocaleString(); // 转为本地字符串格式
  }
  return value;
});
console.log(jsonStr); 
// 输出（示例）: {"name":"会议","time":"2023/10/1 10:00:00"}

中文等Unicode字符的处理

默认情况下，JSON.stringify()会保留非ASCII字符（如中文），无需额外处理：

const text = { msg: "你好，世界！" };
console.log(JSON.stringify(text)); // 输出: {"msg":"你好，世界！"}

若需将中文转为Unicode转义序列（如\u4f60\u597d），可使用replacer手动处理：

const jsonStr = JSON.stringify(text, (key, value) => 
  typeof value === "string" ? value.replace(/[\u4e00-\u9fa5