如何在 JavaScript 中讀取 JSON 檔案？

---

在 JavaScript 中讀取 JSON 檔案有三種有效的方法，分別是使用 fetch()、import 語句和 require()。請檢視本文，其中包含示例和輸出以及方法解釋。

JSON（JavaScript 物件表示法） 是一種輕量級的資料交換格式，易於人類閱讀和編寫，也易於機器解析和生成。在本文中，我們將探討在 JavaScript 中讀取 JSON 檔案的三種不同方法。

讀取 JSON 檔案的方法

• 使用 fetch() 方法
• 使用 import 語句
• 使用 require 模組

每種方法都有其使用場景和注意事項，因此讓我們深入探討每種方法。

JSON 檔案

這將是我們的 JSON 檔案 (data.json)。我們將在所有三種方法中使用此檔案。

{
    "users":[
      {
          "site":"Tutorialspoint",
          "user": "Simple and Easy Learning"
      }
    ]
  }

使用 fetch() 方法

fetch() 方法是在 JavaScript 中發出網路請求的現代方法。它在瀏覽器中得到廣泛支援，並且可以使用 polyfill 在 Node.js 中使用。

fetch() 方法返回一個 Promise，該 Promise 解析為表示請求響應的 Response 物件。然後，我們可以使用 json() 方法將響應主體解析為 JSON。

示例

// File name data.json in the same directory
fetch('./data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

輸出

如果 JSON 檔案不在伺服器上，則會丟擲如下所示的錯誤。因此，我們建議您在 JSON 檔案位於伺服器上時使用此方法。

使用 import 語句

import 語句是 ECMAScript 6 (ES6) 的一部分，允許您直接將 JSON 檔案作為模組匯入。這種方法在現代瀏覽器和 Node.js（版本 13.2.0 及更高版本，使用 --experimental-json-modules 標誌）中受支援。

使用 import 語句時，JSON 檔案作為模組匯入，其內容會自動解析為 JavaScript 物件。

示例

// Add "type": "module" to your package.json or use .mjs extension
import data from './data.json' assert { type: 'json' };

console.log(data);

輸出

如果您沒有在 package.json 中新增 "type": "module" 或使用 .mjs 副檔名，則此方法將無法工作。

使用 require 模組

require 函式通常在 Node.js 中用於匯入模組，包括 JSON 檔案。它在瀏覽器環境中不可用。

當您使用 require 匯入 JSON 檔案時，Node.js 會自動解析 JSON 並將其作為 JavaScript 物件返回。

示例

const data = require('./data.json');
console.log(data);

輸出

結論

在 JavaScript 中讀取 JSON 檔案的每種方法都有其優勢。

• fetch() 方法用途廣泛，適用於瀏覽器環境中的本地和遠端 JSON 檔案。
• import 語句提供了一種現代的、符合 ES6 標準的方法來匯入 JSON，將其視為一個模組。
• require 函式是 Node.js 環境中的一種簡單方法，可以自動為您解析 JSON。

選擇最適合您的專案需求和環境的方法。請記住處理潛在的錯誤，尤其是在處理檔案 I/O 或網路請求時。