การใช้ {} ใน JavaScript Imports

ตัวอย่างโค้ด

ตัวอย่างต่อไปนี้แสดงการใช้ {} ใน JavaScript imports สำหรับ named exports:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style> 
</head> 
<body> 
  <h1>Using '{ }' in javascript imports</h1> 
  <div class="result"></div> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อรันฟังก์ชันที่ import</h3> 
  <script src="script.js" type="module"> </script> 
</body> 
</html>

script.js

import {test, tellTime as showTime} from "./sample.js"; 
let resultEle = document.querySelector('.result'); 
document.querySelector('.Btn').addEventListener('click',()=>{ 
  resultEle.innerHTML += test(); 
  resultEle.innerHTML += showTime(); 
})

sample.js

function testImport() { 
  return "Module testImport has been imported" + ""; 
} 
function tellTime() { 
  return new Date(); 
} 
export { testImport as test, tellTime };

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

Syntax { } ใช้สำหรับ named imports - การ import ฟังก์ชันหรือตัวแปรเฉพาะจาก module โดยระบุชื่อ ต่างจาก default import ที่ไม่ต้องใช้ {} สามารถใช้ as เปลี่ยนชื่อได้ เช่น tellTime as showTime