你一定要了解 String 跟 JSON 是不一樣的！

很多人會誤解JSON僅僅是序列化後的String，但這樣的表述並不完全準確。JSON本質上是以字串（String）形式表示的資料交換格式，但它不僅僅是一個字串，而是具有特定語法和結構的字串。

很經常遇到的一個場景：
後端：我給你返回了一段JSON，你轉化下再遍歷吧。
等前端拿到的時候傻眼了。

前端：喂，真的是JSON？
後端: 千真萬確！

那麼JSON跟String怎麼區分？

1. 本質：

• String：是一個基本資料型別，用於表示一系列字元（例如文字、數字、符號等）。在前端中，字串是用單引號（'）、雙引號（"）或反引號（```）括起來的字元序列。

• JSON：是一種輕量級的資料交換格式。它易於人閱讀和編寫，同時也易於瀏覽器解析和生成。在前端中，JSON物件通常被解析為物件、陣列、字串、數字、布林值或null。

2. 用途：

• String：在前端開發中，字串用於儲存和表示文字資料。它們可以被用於各種目的，包括顯示給使用者、與其他伺服器通訊、處理文字資料等。

• JSON：JSON主要用於儲存和交換資料。它經常被用於在伺服器和客戶端之間傳輸資料。JSON資料可以很容易地被JavaScript解析，使其成為開發中非常流行的資料格式。

3. 語法：

• String：在JavaScript中，字串的語法相對簡單，只需要用引號（“”）將字元序列括起來即可。

• JSON：JSON的語法更加嚴格，因為它需要遵循特定的格式。例如，所有的字串都必須用雙引號括起來，物件的鍵也必須是雙引號括起來的字串。此外，JSON不支援JavaScript中的一些功能，如函式和undefined。

4. 轉換：

• 在開發中，我們可以很容易地將JSON字串解析為JavaScript物件（使用JSON.parse()方法），或者將JavaScript物件轉換為JSON字串（使用JSON.stringify()方法）。

下面是一個簡單的例子來說明這種區別：

// 這是一個字串  
let str = "Hello, World!";  
  
// 這是一個JSON字串（注意雙引號和物件的格式）  
let jsonStr = '{"name": "張三", "age": 30, "city": "上海"}';  
  
// 將JSON字串解析為JavaScript物件  
let obj = JSON.parse(jsonStr);  
console.log(obj.name); // 輸出 "張三"  
  
// 將JavaScript物件轉換為JSON字串  
let jsonStr2 = JSON.stringify(obj);  
console.log(jsonStr2); // 輸出 '{"name":"張三","age":30,"city":"上海"}'

在這個例子中，str是一個字串，而jsonStr是一個JSON字串。透過JSON.parse()方法，我們可以將jsonStr解析為一個JavaScript物件obj。同樣地，透過JSON.stringify()方法，我們可以將obj轉換回一個JSON字串jsonStr2。

再來個標準的JSON物件跟String偽物件的區別：

      const stringObj = "{'text': 'string obj'}";
      const jsonObj = '{"text": "JSON Obj"}';

      console.log(
       "stringObj: " + typeof stringObj
      )

      console.log(
        "jsonObj: " + typeof jsonObj
      )

      console.log(
        "jsonObj: ", JSON.parse(jsonObj)
      )

      console.log(
        "stringObj: ", JSON.parse(stringObj)  // 報錯，不是一個正規格式的JSON
      )

這兩個"JSON"看起來很相似，stringObj 是一個字串字面量，其內容是一個看起來像 JSON 但實際上是用單引號包裹鍵和字串值的非標準 JSON 格式。在 JavaScript 中，JSON 物件的鍵和字串值通常使用雙引號。

那麼當後端返回一個string的偽JSON時，我們該怎麼去解決呢

const strJson = <T>(
  str: string
): T => {

  if(typeOf(str) !== 'string') {
    return str as any
  }

  try {
    return JSON.parse(str)
  } catch {
    return (new Function(`return ${str}`)())
  }
}

接受一個引數，如果本身不是string則直接返回，如果 JSON.parse(str) 丟擲異常（即 str 不是一個有效的 JSON 字串），函式會捕獲這個異常，並嘗試透過建立一個新的函式並執行它來處理 str。有同學就會說這個直接執行str不安全，可以多加幾道防護去過濾。

注意：可以使用eval代替new Function

我們拿上面例子2為例，看能不能處理這個偽JSON

  console.log(strJson(stringObj))
  console.log(strJson(jsonObj))

這當然是可以的啦，再也不怕拿到偽JSON啦