[转]JSON.stringify 详解
来自:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
JSON.stringify()
方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以替换值,或者如果指定了replacer是一个数组,可选的仅包括指定的属性。
语法Edit
JSON.stringify(value[, replacer [, space]])
参数
value
- 将要序列化成 一个JSON 字符串的值。
replacer
可选- 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为null或者未提供,则对象所有的属性都会被序列化;关于该参数更详细的解释和示例,请参考使用原生的 JSON 对象一文。
space
可选- 指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(字符串的前十个字母),该字符串将被作为空格;如果该参数没有提供(或者为null)将没有空格。
返回值
一个表示给定值的JSON字符串。
描述Edit
关于序列化,有下面五点注意事项:
- 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
- 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
undefined、
任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成null
(出现在数组中时)。- 所有以 symbol 为属性键的属性都会被完全忽略掉,即便
replacer
参数中强制指定包含了它们。 - 不可枚举的属性会被忽略
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | JSON.stringify({}); // '{}' JSON.stringify( true ); // 'true' JSON.stringify( "foo" ); // '"foo"' JSON.stringify([1, "false" , false ]); // '[1,"false",false]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify({x: 5, y: 6}); // "{"x":5,"y":6}" JSON.stringify([ new Number(1), new String( "false" ), new Boolean( false )]); // '[1,"false",false]' JSON.stringify({x: undefined, y: Object, z: Symbol( "" )}); // '{}' JSON.stringify([undefined, Object, Symbol( "" )]); // '[null,null,null]' JSON.stringify({[Symbol( "foo" )]: "foo" }); // '{}' JSON.stringify({[Symbol. for ( "foo" )]: "foo" }, [Symbol. for ( "foo" )]); // '{}' JSON.stringify( {[Symbol. for ( "foo" )]: "foo" }, function (k, v) { if ( typeof k === "symbol" ){ return "a symbol" ; } } ); // undefined // 不可枚举的属性默认会被忽略: JSON.stringify( Object.create( null , { x: { value: 'x' , enumerable: false }, y: { value: 'y' , enumerable: true } } ) ); // "{"y":"y"}" |
replacer参数
replacer参数可以是一个函数或者一个数组。作为函数,它有两个参数,键(key)值(value)都会被序列化。
- 如果返回一个
Number
, 转换成相应的字符串被添加入JSON字符串。 - 如果返回一个
String
, 该字符串作为属性值被添加入JSON。 - 如果返回一个
Boolean
, "true" 或者 "false"被作为属性值被添加入JSON字符串。 - 如果返回任何其他对象,该对象递归地序列化成JSON字符串,对每个属性调用replaceer方法。除非该对象是一个函数,这种情况将不会被序列化成JSON字符串。
- 如果返回undefined,该属性值不会在JSON字符串中输出。
注意: 不能用replacer方法,从数组中移除值(values),如若返回undefined或者一个函数,将会被null取代。
例子(function)
function replacer(key, value) {
if (typeof value === "string") {
return undefined;
}
return value;
}
var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
JSON序列化结果为 {"week":45,"month":7}
.
例子(array)
如果replacer是一个数组,数组的值代表将被序列化成JSON字符串的属性名。
JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', 只保留“week”和“month”属性值。
space
参数
space 参数用来控制结果字符串里面的间距。如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);如果是一个字符串,则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)。
1 | JSON.stringify({ a: 2 }, null , " " ); // '{\n "a": 2\n}' |
使用制表符(\t)来缩进:
1 2 3 4 5 | JSON.stringify({ uno: 1, dos : 2 }, null , '\t' ) // '{ \ // "uno": 1, \ // "dos": 2 \ // }' |
toJSON 方法
如果一个被序列化的对象拥有 toJSON
方法,那么该 toJSON
方法就会覆盖该对象默认的序列化行为:不是那个对象被序列化,而是调用 toJSON
方法后的返回值会被序列化,例如:
1 2 | '"bar"' '{"x":"bar"}' |
JSON.stringify
用作 JavaScript
注意JSON不是javascript严格意义上的子集,在JSON中不需要省略两条终线(Line separator和Paragraph separator)但在JavaScript中需要被省略。因此,如果JSON被用作JSONP时,下面方法可以使用:
function jsFriendlyJSONStringify (s) {
return JSON.stringify(s).
replace(/\u2028/g, '\\u2028').
replace(/\u2029/g, '\\u2029');
}
var s = {
a: String.fromCharCode(0x2028),
b: String.fromCharCode(0x2029)
};
try {
eval('(' + JSON.stringify(s) + ')');
} catch (e) {
console.log(e); // "SyntaxError: unterminated string literal"
}
// No need for a catch
eval('(' + jsFriendlyJSONStringify(s) + ')');
// console.log in Firefox unescapes the Unicode if
// logged to console, so we use alert
alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
使用 JSON.stringify 结合 localStorage 的例子
一些时候,你想存储用户创建的一个对象,并且,即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify
适用于这种情形的一个样板:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 创建一个示例数据 var session = { 'screens' : [], 'state' : true }; session.screens.push({ "name" : "screenA" , "width" :450, "height" :250}); session.screens.push({ "name" : "screenB" , "width" :650, "height" :350}); session.screens.push({ "name" : "screenC" , "width" :750, "height" :120}); session.screens.push({ "name" : "screenD" , "width" :250, "height" :60}); session.screens.push({ "name" : "screenE" , "width" :390, "height" :120}); session.screens.push({ "name" : "screenF" , "width" :1240, "height" :650}); // 使用 JSON.stringify 转换为 JSON 字符串 // 然后使用 localStorage 保存在 session 名称里 localStorage.setItem( 'session' , JSON.stringify(session)); // 然后是如何转换通过 JSON.stringify 生成的字符串,该字符串以 JSON 格式保存在 localStorage 里 var restoredSession = JSON.parse(localStorage.getItem( 'session' )); // 现在 restoredSession 包含了保存在 localStorage 里的对象 console.log(restoredSession); |
规范Edit
规范名称及链接 | 规范状态 |
---|---|
ECMAScript 5.1 (ECMA-262) JSON.stringify |
Standard |
ECMAScript 2015 (6th Edition, ECMA-262) JSON.stringify |
Standard |
浏览器兼容性Edit
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 3.5 (1.9.1) | 8.0 | 10.5 | 4.0 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!