轻松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



还没有评论,来说两句吧...