JSON对象转为字符串怎么用:全面解析与实践指南
在JavaScript开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,广泛应用于前后端数据交互、配置存储等场景,我们常常需要将JavaScript中的对象(Object)转换为JSON字符串,以便通过网络传输或存储到文本文件中,本文将详细介绍“JSON对象转为字符串”的核心方法、使用场景、注意事项及代码示例,帮你彻底这一技能。
核心方法:JSON.stringify()
将JSON对象转为字符串,JavaScript原生提供了JSON.stringify()方法,这是ECMAScript 5引入的标准方法,所有现代浏览器和Node.js环境均支持,无需额外引入库。
基本语法
JSON.stringify()的基本语法如下:
JSON.stringify(value, replacer, space)
参数说明:
- value(必选):要转换的JSON对象或值(可以是对象、数组、基本类型等)。
- replacer(可选):用于转换过程的函数或数组,用于控制哪些属性被转换或如何转换值。
- space(可选):格式化输出时的缩进字符串或数字,用于美化JSON字符串的可读性。
基础使用示例
假设有一个简单的JSON对象,我们直接调用JSON.stringify()即可转为字符串:
const user = {
name: "张三",
age: 25,
isStudent: false,
hobbies: ["阅读", "游泳"]
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出:{"name":"张三","age":25,"isStudent":false,"hobbies":["阅读","游泳"]}
可以看到,对象被转换为一个标准的JSON字符串,属性名用双引号包裹,值根据类型自动格式化(字符串用双引号,布尔值和数字保持原样)。
进阶用法:replacer参数的妙用
replacer参数允许自定义转换逻辑,有两种形式:函数或数组。
replacer为函数:过滤或修改属性值
当replacer是一个函数时,会对对象的每个属性(包括嵌套属性)调用该函数,返回值将作为该属性在JSON字符串中的最终值,函数接收两个参数:
key:当前属性的键(属性名)。value:当前属性的值。
示例:过滤掉敏感信息(如密码)
const userWithPassword = {
name: "李四",
password: "123456",
email: "lisi@example.com"
};
// 过滤掉password属性
const filteredJson = JSON.stringify(userWithPassword, (key, value) => {
if (key === "password") {
return undefined; // 返回undefined表示忽略该属性
}
return value;
});
console.log(filteredJson);
// 输出:{"name":"李四","email":"lisi@example.com"}
示例:修改属性值格式
const data = {
price: 100,
currency: "CNY"
};
// 将价格转换为字符串并添加货币符号
const modifiedJson = JSON.stringify(data, (key, value) => {
if (key === "price") {
return `¥${value}`;
}
return value;
});
console.log(modifiedJson);
// 输出:{"price":"¥100","currency":"CNY"}
replacer为数组:指定需要保留的属性
如果replacer是一个数组,数组元素应为字符串(属性名),只有数组中列出的属性会被包含在最终的JSON字符串中。
示例:只保留name和age属性
const user = {
name: "王五",
age: 30,
gender: "男",
address: "北京市朝阳区"
};
const selectedJson = JSON.stringify(user, ["name", "age"]);
console.log(selectedJson);
// 输出:{"name":"王五","age":30}
格式化输出:space参数的应用
默认情况下,JSON.stringify()输出的JSON字符串是压缩的(无缩进和换行),可读性较差,通过space参数,可以格式化输出,方便调试或展示。
space为数字:指定缩进空格数
数字表示每级缩进的空格数,有效范围是0-10(超过10会自动转为10)。
示例:缩进2个空格
const user = {
name: "赵六",
details: {
age: 28,
hobbies: ["旅行", "摄影"]
}
};
const formattedJson = JSON.stringify(user, null, 2);
console.log(formattedJson);
输出(带缩进和换行):
{
"name": "赵六",
"details": {
"age": 28,
"hobbies": [
"旅行",
"摄影"
]
}
}
space为字符串:自定义缩进内容
如果space是字符串(如"\t"或),则用该字符串作为缩进符号。
示例:使用制表符缩进
const formattedJsonWithTab = JSON.stringify(user, null, "\t"); console.log(formattedJsonWithTab);
输出(用制表符缩进):
{
"name": "赵六",
"details": {
"age": 28,
"hobbies": [
"旅行",
"摄影"
]
}
}
注意事项:这些“坑”要避开
循环引用对象无法直接转换
如果对象中存在循环引用(即对象的某个属性间接或直接指向对象本身),JSON.stringify()会抛出TypeError。
示例:循环引用
const obj = {};
obj.self = obj; // obj的self属性指向自己
console.log(JSON.stringify(obj)); // 报错:TypeError: Converting circular structure to JSON...
解决方案:手动处理循环引用,或使用库(如flatted)进行安全转换。
函数、Symbol、undefined会被忽略
JSON.stringify()会忽略以下类型的属性值:
- 函数(
function) - Symbol(
symbol) undefined
示例
const data = {
name: "钱七",
sayHi: function() { console.log("Hi"); },
id: Symbol("id"),
temp: undefined
};
console.log(JSON.stringify(data));
// 输出:{"name":"钱七"}
可以看到,sayHi、id和temp均未出现在结果中。
BigInt类型会抛出错误
BigInt类型的值无法被序列化为JSON,直接调用会抛出TypeError。
示例
const bigNum = BigInt(9007199254740991); console.log(JSON.stringify(bigNum)); // 报错:TypeError: Do not know how to serialize a BigInt
解决方案:手动转换为字符串,再在解析时处理:
const safeBigNum = String(bigNum);
console.log(JSON.stringify({ bigNum: safeBigNum })); // 输出:{"bigNum":"9007199254740991"}
中文等Unicode字符默认会被编码
如果JSON字符串中包含非ASCII字符(如中文),JSON.stringify()默认会对其进行Unicode编码(如\u4e2d\u6587)。
示例
const text = { message: "你好,世界!" };
console.log(JSON.stringify(text));
// 输出:{"message":"\u4f60\u597d\uff0c\u4e16\u754c\uff01"}
解决方案:使用replacer参数手动处理,或确保接收方正确解析Unicode编码,若需直接输出中文,可在解析时使用JSON.parse()的reviver参数(但需注意,JSON.stringify()本身不提供直接保留中文的选项,通常由后端或前端框架处理)。
实际应用场景
前后端数据交互
前端常将表单数据、状态对象等通过JSON.stringify()转为字符串,再通过fetch或axios发送给后端(如POST请求的body)。
示例:发送POST请求
const formData = {
username: "admin",
password: "123456"
};
fetch("https://api.example.com/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(formData) // 转为JSON字符串
});
本地存储数据
浏览器提供的localStorage和sessionStorage只能存储字符串类型的数据,因此需要将对象转为JSON字符串存储,读取时再用JSON.parse()解析。
示例:存储用户配置



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