This translation is incomplete. Please help translate this article from English.

import ใช้ในการ binding กับโมดูลที่ได้ทำการ export


ฟีเจอร์นี้ เพิ่งเริ่มต้นการพัฒนา บนเบราว์เซอร์แบบ native ซึ่งสามารถใช้ได้กับ transpilers ที่ได้นำ import ไปใช้แล้ว เช่น TypeScript และ Babel, หรือ bundlers ได้แก่ RollupWebpack และ Parcel.


import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
ชื่อตัวแปรที่อ้างอิงถึงค่า default ที่ประกาศ export จาก module.
ชื่อของไฟล์ของโมดูลที่จะทำการ import โดยส่วนมากใช้ relative หรือ absolute path ในการอ้างอิงถึงไฟล์  .js ที่มีโมดูลเราต้องการ โดยที่ไม่มี .js ต่อท้าย แต่บางครั้ง bundlers อาจจะอนุญาตหรือต้องการ file extension ขึ้นกับ environment ที่ทำการพัฒนา สามารถใช้ single quotes หรือ double quotes Strings ในการประกาศได้เท่านั้น
export, exportN
ชื่อของตัวแปรของโมดูลที่ต้องการ import
alias, aliasN
ชื่อตัวแปรที่ต้องการใช้เรียกอ้างอิงสิ่งที่ imports.


The name parameter is the name of the "module object" which will be used as a kind of namespace to refer to the exports. The export parameters specify individual named exports, while the import * as name syntax imports all of them. Below are examples to clarify the syntax.

Import an entire module's contents

This inserts myModule into the current scope, containing all the exports from the module in the file located in /modules/my-module.js.

import * as myModule from '/modules/my-module.js';

Here, accessing the exports means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes an export doAllTheAmazingThings(), you would call it like this:


Import a single export from a module

Given an object or value named myExport which has been exported from the module my-module either implicitly (because the entire module is exported) or explicitly (using the export statement), this inserts myExport into the current scope.

import {myExport} from '/modules/my-module.js';

Import multiple exports from module

This inserts both foo and bar into the current scope.

import {foo, bar} from '/modules/my-module.js';

Import an export with a more convenient alias

You can rename an export when importing it. For example, this inserts shortName into the current scope.

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

Rename multiple exports during import

Import multiple exports from a module with convenient aliases.

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

Import a module for its side effects only

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

import '/modules/my-module.js';

Importing defaults

It is possible to have a default export (whether it is an object, a function, a class, etc.). The import statement may then be used to import such defaults.

The simplest version directly imports the default:

import myDefault from '/modules/my-module.js';

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace


import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports


ที่ทำการอ้างอิงจากโมดูลที่ช่วยในการประมวลผล AJAX JSON request.

โมดูล: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
  };'GET', url, true);

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));

โค้ตในโปรแกรมหลัก : main.js

import { getUsefulContents } from '/modules/file.js';

    data => { doSomethingUseful(data); });


Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.


FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61




54 — 602

Dynamic import63 ? No5 ?50 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No61 Yes


54 — 602

4710.1 No
Dynamic import6363 ? No550 ? ?

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

3. files must have suffix .mjs, not .js

4. From version 8.5.0: this feature is behind the --experimental-modules runtime flag.

5. See bug 1342012.


Document Tags and Contributors

ผู้มีส่วนร่วมกับหน้านี้: noppadet008
อัปเดตล่าสุดโดย: noppadet008,