JavaScript - JSON.parse() 方法

JavaScript 的 JSON.parse() 方法用於解析（或轉換）JSON 字串為 JavaScript 物件。在 JavaScript 中，“JSON” 是一種輕量級的資料交換格式，廣泛用於在 Web 伺服器和客戶端之間交換資料。

術語 “解析” 表示將資料的字串表示形式（以 JSON 格式）轉換為 JavaScript 可以理解的格式，例如物件。

JSON.parse() 方法是 JavaScript 中的靜態方法，這意味著您始終可以將其用作 JSON.parse()，無需建立物件例項即可呼叫它。

語法

以下是 JavaScript JSON.parse() 方法的語法：

JSON.parse(text, reviver)

引數

此方法接受兩個名為“text”和“reviver”的引數，如下所述：

text - 您要解析的 JSON 字串。
reviver（可選） - 一個函式，可以在返回結果物件之前對其進行轉換。您可以使用此函式在解析期間修改特定的屬性或值。

返回值

此方法返回一個 JavaScript 物件、陣列、字串、數字、布林值或 null 值，對應於給定的 JSON 文字。

示例

示例 1

當我們省略 “reviver” 引數並僅將 “text” 引數傳遞給此方法時，它會將文字（JSON 字串）轉換為物件。

在以下程式中，我們使用 JavaScript JSON.parse() 方法將文字（JSON 字串）{"name": "Rahul", "age": 23, "city": "Hyderabad"} 轉換為 JavaScript 物件。

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string
      const student = '{"name": "Rahul","age": 23, "city": "Hyderabad"}';
      document.write("Before parse(JSON string): ", student);
      document.write("<br>Object (after parse JSON string): ");
      
      //using the JSON.parse() method
      var obj = JSON.parse(student);
      document.write("<br>Name: ", obj.name);
      document.write("<br>Age: ", obj.age);
      document.write("<br>City: ", obj.city);
   </script>
</body>
</html>

輸出

上述程式在解析給定的 JSON 字串後返回一個物件。

Before parse(JSON string): {"name": "Rahul","age": 23, "city": "Hyderabad"}
Object (after parse JSON string):
Name: Rahul
Age: 23
City: Hyderabad

示例 2

如果我們將 “text” 和 “reviver” 兩個引數都傳遞給此方法，它將轉換 JSON 字串並根據 reviver 函式轉換結果物件。

以下是使用 JavaScript JSON.parse() 方法的另一個示例。我們使用此方法將給定的 JSON 字串 {"1": 2, "2": 4, "3": 5, "4": 8} 轉換為物件。此外，我們將使用 reviver 函式來轉換結果物件，以便它以修改後的結構返回鍵及其相應的值。

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string
      const numbers = '{"1": 2,"2": 4, "3": 5, "4": 8}';
      document.write("Before parse(JSON string): ", numbers, "<br>");
      document.write("Object (after parse JSON string): <br>");
      
      var obj = JSON.parse(numbers, (key, value) => {
         document.write("key = ", key, " Value = ", value, "<br>");
      });
   </script>
</body>
</html>

輸出

執行上述程式後，它將返回物件的鍵及其對應值。

Before parse(JSON string): {"1": 2,"2": 4, "3": 5, "4": 8}
Object (after parse JSON string):
key = 1 Value = 2
key = 2 Value = 4
key = 3 Value = 5
key = 4 Value = 8
key = Value = [object Object]

示例 3

讓我們使用 reviver 函式修改轉換後的物件的特定值。

在下面的示例中，我們使用 JSON.parse() 方法將給定的 JSON 字串 students = '[{}]' 轉換為物件。然後，我們定義一個名為 increaseAge() 的函式。此函式將每個學生的年齡增加 5。最後，我們將此函式傳遞給 JSON.parse() 方法以檢索具有更新年齡的格式化輸出。

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string 
      const students = '[{"name": "Rahul", "age": 23, "city": "Hyderabad"}, {"name": "Vikash", "age": 22, "city": "Lucknow"}, {"name": "Shikha", "age": 21, "city": "Lucknow"}]';
      document.write("Before parse (JSON string): <br>", students);
      
      //Define a reviver function
      function increaseAge(key, value){
         if(key == "age"){
            return value+5;
         }
         return value;
      }

      var obj = JSON.parse(students, increaseAge);
      document.write("<br>", obj[0].name , " updated age: ", obj[0].age);
      document.write("<br>", obj[1].name , " updated age: ", obj[1].age);
      document.write("<br>", obj[2].name , " updated age: ", obj[2].age);
   </script>
</body>
</html>

輸出

執行上述程式後，它將返回一個包含更新的學生年齡的物件。

Before parse (JSON string):
[{"name": "Rahul", "age": 23, "city": "Hyderabad"}, 
{"name": "Vikash", "age": 22, "city": "Lucknow"}, 
{"name": "Shikha", "age": 21, "city": "Lucknow"}]
Rahul updated age: 28
Vikash updated age: 27
Shikha updated age: 26

列印頁面