JSON 模組指令碼現已可供新 Baseline 使用

可用。 keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

發布日期：2025 年 6 月 18 日

如果您想在 JavaScript 模組中匯入 JSON 檔案，先前必須經過許多繁瑣的步驟，例如在 JavaScript 中嵌入 JSON，才能使用一般 import 陳述式，或是使用 fetch() 下載檔案，然後呼叫 Response.json()。由於有 JSON 模組指令碼和匯入屬性，現在所有新型瀏覽器都已解決這個問題。

以下範例說明如何從 JavaScript 模組指令碼內部匯入 JSON 模組指令碼：

import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };

const {explanation, title, url} = astronomyPictureOfTheDay;

document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });

不需要 JSON.parse()，JSON 會在 import 之後立即剖析並準備就緒。這是因為瀏覽器事先知道它正在處理 JSON，而您已透過匯入屬性 with { type: "json" } 宣告 JSON。

請查看這個JSON 模組匯入功能的即時示範，該示範使用上一個清單中的程式碼。

模組指令碼的 MIME 類型檢查是嚴格的。為了讓 JSON 模組指令碼的擷取作業成功，HTTP 回應必須包含 JSON MIME 類型，例如 Content-Type: text/json。

如果省略陳述式的 with { type: "json" } 部分，瀏覽器會假設意圖是匯入 JavaScript 模組指令碼，如果 HTTP 回應的 MIME 類型不是 JavaScript MIME 類型，擷取作業就會失敗。

您可以在 HTML 規格中進一步瞭解 JSON 模組指令碼處理程序。