ES12 中的 import.meta：了解其功能与实用性

ES12（也被称为 ES2021）是 ECMAScript 标准中的最新版本，于 2021 年 6 月发布。ES12 中有一个新特性——import.meta，它可以让开发者在导入模块时访问到一些有用的元数据。这个功能很实用，本文将详细介绍import.meta的用法，并提供示例代码，帮助读者更好地理解这个特性。

什么是 import.meta？

在 ES6 中，我们可以使用import语句导入模块，例如：

import { myFunc } from './myModule.js';

在 ES12 中，import语句不仅能够导入模块，还能访问一个特殊的对象，即import.meta。这个对象包含了一些模块相关的元数据。

import.meta 中的元数据

import.meta对象中包含的元数据有：

• import.meta.url：一个字符串，表示当前模块的 URL 地址。
• import.meta.scriptElement：一个 HTML <script> 元素，表示当前模块所在的<script>元素。

其中，import.meta.url比较常用，我们可以使用它来获取模块所在的 URL 地址。例如，在浏览器端，我们可以打印它来看看当前模块的 URL 地址：

console.log(import.meta.url);
// 输出：https://example.com/js/myModule.js

import.meta.url的实用性

import.meta.url的实用性非常大。例如，我们可以使用它来动态加载其他资源。下面是一个例子，使用import动态加载一张图片：

const imgUrl = new URL('./myImage.png', import.meta.url);
const img = document.createElement('img');
img.src = imgUrl.href;
document.body.appendChild(img);

这里，我们使用了URL对象将相对路径转换为绝对路径，然后创建了一个<img>元素，并将其链接设置为我们刚刚创建的URL。最后，我们将<img>元素添加到文档中。这个技巧在很多场景下都很有用，例如动态加载 CSS、JSON 或其他资源。

import.meta.url的指导意义

import.meta.url对于开发者来说是一个非常实用的工具，它可以让我们更好地了解当前模块所在的位置，有助于我们编写更有适应性的代码。例如，在编写 Web 应用时，我们可能会将图片、音频和视频文件存放在一个独立的文件夹中。使用import.meta.url，我们可以轻松地加载这些文件，例如：

import soundUrl from './sounds/sound.mp3';
const sound = new Audio(soundUrl);
sound.play();

总结

import.meta是 ES12 中的一个新特性，它包含了一些模块相关的元数据，其中比较实用的是import.meta.url。这个特性可以让我们更好地了解模块的位置，以及动态加载其他资源。在开发 Web 应用时，使用import.meta.url可以让我们更加灵活地编写代码。希望本文能够帮助读者了解import.meta的实用性，以及如何在实践中使用它。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659fb1ebadd4f0e0ff838216