نصوص JSON MODULE هي الآن خط الأساس متاح حديثًا | بلوق | web.dev

تم النشر: 18 يونيو 2025

إذا كنت ترغب في استيراد ملف JSON في وحدة JavaScript ، فيجب عليك في السابق أن تمر عبر الأطواق مثل تضمين JSON في JavaScript فقط حتى تتمكن من استخدام العادية
import بيان ، أو تنزيل ملف مع fetch() ثم الاتصال
Response.json(). هذه مشكلة تم حلها الآن في جميع المتصفحات الحديثة بفضل البرامج النصية للوحدة JSON وسمات الاستيراد.

توضح العينة التالية كيف يمكن استيراد برنامج نصي لـ 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 التي تستخدم الرمز من القائمة السابقة.

فحص نوع MIME لبرامج النصوص الصارمة. من أجل نجاح جلب البرنامج النصي JSON Module ، يجب أن يكون للاستجابة HTTP نوع MIME JSON ، على سبيل المثال Content-Type: text/json.

إذا with { type: "json" } تم حذف جزء من البيان ، يفترض المتصفح أن القصد من ذلك هو استيراد برنامج نصي لـ JavaScript ، وسوف يفشل الجلب إذا كانت استجابة HTTP لها نوع MIME ليس نوعًا من جافا سكريبت.

يمكنك قراءة المزيد حول معالجة برنامج JSON MODULE SCRIPT في مواصفات HTML.