【程式語言 - Javascript】輕量資料格式 JSON

JSON 全名 JavaScript Object Notation，其格式基本上就是key: value的組成如下：

圖片來源

{
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

格式有以下幾個特點：

• 名稱必須為字串，用雙引號包括其名稱： "name"。
• value的部份可以是「字串、數字、true、false、null、物件或陣列」。
• 支援嵌套物件。
• 不支援Javascript的Date、Error、undefined。

Javascript: JSON.stringify

從Javascript中的物件轉為JSON字串

const obj = {
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

const str = JSON.stringify(obj);
// "{"name":"Bob","age":40,"childs":[{"name":"Justin","age":10}]}"

我們也可以只對其中的name、age進行JSON字串的輸出即可。

const obj = {
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

const str = JSON.stringify(obj, ["name", "age"]);
// "{"name":"Bob","age":40}"

另外Javascript本身也可以對物件本身實做toJSON的方法來進行加工， 舉例來說，我們今天想要把name的部份都轉換為大寫輸出， 那麼可以這麼做：

const obj = {
   "name": "Bob",
   "age": 40,
   "toJSON" : function() {
        return {
            name : this.name.toUpperCase(), 
            age  : this.age
        };
    }
}

const str = JSON.stringify(obj, ["name", "age"]);
// "{"name":"BOB","age":40}"

最後來介紹第三個參數， 做為縮排輸出的配置：

• 如果是數字1 ~ 10，會自動換行並以指定數字作為縮排的層次。
• 也可以用某個字元作為縮排的識別。

const obj = {
   "name": "Bob",
   "age": 40
}

const str = JSON.stringify(obj, undefined, 2);
// "{
//     "name": "Bob",
//     "age": 40,
//     "childs": [
//       {
//         "name": "Justin",
//         "age": 10
//       }
//     ]
//  }"

Javascript: JSON.parse

主要從字串解析回Javascript的物件， 常用於讀檔的時候， 讀取json檔案後由於型態為字串，而我們希望解析為JSON物件較方便處理可以這樣：

const str = "{\\"name\\":\\"Bob\\",\\"age\\":40,\\"childs\\":[{\\"name\\":\\"Justin\\",\\"age\\":10}]}"
const obj = JSON.parse(str);
console.log(obj.name); // "Bob"

結語

這種資料交換格式以可讀性來講勝於XML格式，畢竟省去了太多的標記符號了，而且非常靈活彈性，以空間上來說也較XML輕量，但仍有改善空間，後面我們有會陸續介紹YAML、TOML這類型的資料交換格式，之間又有什麼不同、帶來什麼改善與好處…。

喜歡撰寫文章的你，不妨來了解一下：

Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入？

歡迎加入一起練習寫作，賺取知識！