موجود است. کلمات کلیدی: docType:Blog، دسته:Baseline2025، زبان:JavaScript
تاریخ انتشار: 18 ژوئن 2025
اگر می‌خواهید یک فایل JSON را در یک ماژول جاوا اسکریپت وارد کنید، قبلاً باید از حلقه‌هایی مانند جاسازی JSON در جاوا اسکریپت استفاده می‌کردید تا بتوانید از یک دستور import معمولی استفاده کنید یا فایلی را با fetch() دانلود کنید و سپس Response.json() فراخوانی کنید. این مشکلی است که اکنون در همه مرورگرهای مدرن به لطف اسکریپت های ماژول JSON و ویژگی های import حل شده است.
نمونه زیر نشان می دهد که چگونه یک اسکریپت ماژول 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 سروکار دارد، که شما آن را با ویژگی import with { type: "json" } اعلام می‌کنید.
این نسخه نمایشی زنده واردات ماژول JSON را که از کد فهرست قبلی استفاده می‌کند، بررسی کنید.
بررسی نوع MIME برای اسکریپت های ماژول سختگیرانه است. برای اینکه واکشی اسکریپت ماژول JSON با موفقیت انجام شود، پاسخ HTTP باید دارای نوع JSON MIME باشد، برای مثال Content-Type: text/json .
اگر قسمت with { type: "json" } از عبارت حذف شود، مرورگر فرض می کند که قصد وارد کردن یک اسکریپت ماژول جاوا اسکریپت است و اگر پاسخ HTTP نوع MIME داشته باشد که از نوع MIME جاوا اسکریپت نیست، واکشی شکست خواهد خورد.
می توانید اطلاعات بیشتری در مورد پردازش اسکریپت ماژول JSON در مشخصات HTML بخوانید .