js JSON.stringify()基礎詳解

2024-05-06 16:52:26

字體：大中小

來源：轉載

供稿：網友

JSON.stringify() 方法是將一個JavaScript值(對象或者數組)轉換為一個 JSON字符串，如果指定了replacer是一個函數，則可以選擇性的替換值，或者如果指定了replacer是一個數組，可選擇性的僅包含數組指定的屬性。

語法

JSON.stringify(value[, replacer [, space]])

參數

value

將要序列化成一個JSON 字符串的值。

replacer 可選

如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理；如果該參數是一個數組，則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數為null或者未提供，則對象所有的屬性都會被序列化；關于該參數更詳細的解釋和示例，請參考使用原生的 JSON 對象一文。

space 可選

指定縮進用的空白字符串，用于美化輸出（pretty-print）；如果參數是個數字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格；如果該參數為字符串(字符串的前十個字母)，該字符串將被作為空格；如果該參數沒有提供（或者為null）將沒有空格。
返回值

一個表示給定值的JSON字符串。

描述
JSON.stringify()將值轉換為相應的JSON格式：

轉換值如果有toJSON()方法，該方法定義什么值將被序列化。
非數組對象的屬性不能保證以特定的順序出現在序列化后的字符串中。
布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。
undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。函數、undefined被單獨轉換時，會返回undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。
所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們。
Date日期調用了toJSON()將其轉換為了string字符串（同Date.toISOString()），因此會被當做字符串處理。
NaN和Infinity格式的數值及null都會被當做null。
其他類型的對象，包括Map/Set/weakMap/weakSet，僅會序列化可枚舉的屬性。

實例

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字符串，對每個屬性調用replacer方法。除非該對象是一個函數，這種情況將不會被序列化成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個空格）；如果是一個字符串，則每一級別會比上一級別多縮進用該字符串（或該字符串的前十個字符）。

JSON.stringify({ a: 2 }, null, " "); // '{/n "a": 2/n}'

使用制表符（/t）來縮進：

JSON.stringify({ uno: 1, dos : 2 }, null, '/t')// '{      ///   "uno": 1, ///   "dos": 2 /// }'

toJSON 方法

如果一個被序列化的對象擁有 toJSON 方法，那么該 toJSON 方法就會覆蓋該對象默認的序列化行為：不是那個對象被序列化，而是調用 toJSON 方法后的返回值會被序列化，例如：

var obj = { foo: 'foo', toJSON: function () {  return 'bar'; }};JSON.stringify(obj);   // '"bar"'JSON.stringify({x: obj}); // '{"x":"bar"}'

注意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 catcheval('(' + jsFriendlyJSONStringify(s) + ')');// console.log in Firefox unescapes the Unicode if//  logged to console, so we use alertalert(jsFriendlyJSONStringify(s)); // {"a":"/u2028","b":"/u2029"}

使用 JSON.stringify 結合 localStorage 的例子
一些時候，你想存儲用戶創建的一個對象，并且，即使在瀏覽器被關閉后仍能恢復該對象。下面的例子是 JSON.stringify 適用于這種情形的一個樣板：

// 創建一個示例數據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);

規范

規范名稱及鏈接規范狀態
ECMAScript 5.1 (ECMA-262) JSON.stringify

ECMAScript 2015 (6th Edition, ECMA-262)JSON.stringify

瀏覽器兼容性

js,JSON,stringify