प्रति फ़ाइल केवल एक डिफ़ॉल्ट निर्यात हो सकता है और दूसरी फ़ाइल में आयात करते समय हम इसे कोई भी नाम निर्दिष्ट कर सकते हैं। हालाँकि, एक फ़ाइल में कई नामित निर्यात हो सकते हैं और उन्हें उस नाम का उपयोग करके आयात किया जाता है जिसका उपयोग निर्यात करने के लिए किया गया था।
जावास्क्रिप्ट में डिफ़ॉल्ट निर्यात और नामित निर्यात के बीच अंतर दिखाने वाला कोड निम्नलिखित है -
उदाहरण
<!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>Default export vs Named Export</h1> <div class="result"></div> <button class="Btn">CLICK HERE</button> <h3>Click on the above export function as named and default export</h3> <script src="script.js" type="module"> </script> </body> </html>
नमूना.जेएस
export default function testImport(){ return 'Module testImport has been imported'+''; } export function tellTime(){ return new Date(); }
script.js
import defaultExport from "./sample.js"; import {tellTime} from "./sample.js"; let resultEle = document.querySelector('.result'); document.querySelector('.Btn').addEventListener('click',()=>{ resultEle.innerHTML+=defaultExport(); resultEle.innerHTML+=tellTime(); })
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
'यहां क्लिक करें' बटन पर क्लिक करने पर -