利用 ECMAScript 2020 的 import.meta.url 获取模块 URL-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要获取当前正在执行的脚本所在的 URL，以便进行一些动态加载资源的操作，例如使用 Ajax 请求配置文件或者动态加载图片等。在过去，我们一般采用 document.currentScript.src 或 location.href 等方式来获取当前脚本的 URL，但这些方法有一些局限性，比如无法使用动态插入的 <script> 标签获取 URL，而且还需要在不同的浏览器和平台上进行特殊处理。

为了解决这些问题，ECMAScript 2020 新增了一个特性，即 import.meta.url，它可以帮助我们获取当前模块的 URL，不论是在静态导入还是动态导入的情况下。

如何使用 import.meta.url

使用 import.meta.url 很简单，只需要在模块中使用即可，例如：

// module.js
console.log(import.meta.url); // 输出模块的 URL

上述代码中，import.meta.url 的值就是当前模块（module.js）所在的 URL。

需要注意的是，import.meta.url 目前只能用于模块化脚本，因此不能在普通的脚本中使用。

示例代码

下面是一个简单的例子，假设我们需要动态加载一张图片，并使用 import.meta.url 获取当前脚本的 URL，然后拼接出图片的 URL：

// index.js
import image from './image.png'; // 导入图片
import { loadImage } from './loadImage.js'; // 导入加载图片的函数

const imageUrl = new URL(image, import.meta.url).toString();
loadImage(imageUrl); // 加载图片

// loadImage.js
export function loadImage(url) {
  const img = new Image();
  img.src = url;
  document.body.appendChild(img);
}

在上述代码中，我们首先使用静态导入的方式导入图片，然后使用 import.meta.url 获取当前脚本的 URL，并将图片 URL 解析成绝对路径。最后，我们再通过自定义的 loadImage 函数加载图片并插入到页面中。

总结

利用 ECMAScript 2020 的 import.meta.url 特性可以轻松地获取当前模块的 URL，这为我们进行一些动态加载资源的操作提供了便利。需要注意的是，import.meta.url 目前只能用于模块化脚本中。

当然，除了 import.meta.url 外，还有一些其他获取当前 URL 的方法，例如 document.currentScript.src、location.href 等，这些方法在一些特殊的场景下可能会有用。因此，在具体应用时需要根据实际情况进行选择。

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