نصوص وحدة JSON البرمجية متاحة الآن في الإصدار الأساسي

متوفّرة. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

تاريخ النشر: 18 حزيران (يونيو) 2025

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

يوضّح المثال التالي كيفية استيراد نص برمجي لوحدة JSON من داخل نص برمجي لوحدة JavaScript:

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، يجب أن يحتوي ردّ HTTP على نوع MIME بتنسيق JSON، مثلاً Content-Type: text/json.

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

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