available. keywords: docType:Blog,category:Baseline2025,language:JavaScript
เผยแพร่: 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