如何在脚本中获取脚本文件名

在前端开发中，经常需要获取当前正在执行的脚本文件名。例如，您可能需要将文件名记录到日志中或根据文件名显示相关信息。

下面介绍几种方法来获取脚本文件名：

方法一：使用 document.currentScript

document.currentScript 属性返回当前正在执行的 <script> 元素。通过该元素的 src 属性可以获取脚本的 URL，然后从 URL 中提取出文件名。

const scriptUrl = document.currentScript.src;
const fileName = scriptUrl.substring(scriptUrl.lastIndexOf('/') + 1);
console.log('The script file name is:', fileName);

请注意，此方法不适用于动态加载的脚本。

方法二：使用 Error.stack

另一种获取脚本文件名的方法是使用 Error.stack 属性。这个属性返回一个字符串，其中包含调用堆栈的信息。您可以从中解析出脚本文件名。

function getFileName() {
  const stackTrace = new Error().stack;
  const startIndex = stackTrace.indexOf('(') + 1;
  const endIndex = stackTrace.indexOf(':', startIndex);
  const fileName = stackTrace.substring(startIndex, endIndex);
  console.log('The script file name is:', fileName);
}
getFileName();

请注意，此方法会创建一个 Error 对象，因此对性能有一定影响。

方法三：使用模板字符串

如果你的脚本是通过模板字符串直接内嵌到 HTML 中的，那么可以使用模板字符串来获取脚本文件名。

<script id="my-script" type="text/javascript">
  const scriptTag = document.getElementById('my-script');
  const fileName = scriptTag.getAttribute('src').split('/').pop();
  console.log('The script file name is:', fileName);
</script>

这种方法适用于内嵌脚本，而不是外部脚本文件。

结论

以上就是获取脚本文件名的几种方法。您可以根据自己的情况选择其中一种方法来实现。

如果您需要在多个脚本中使用相同的代码，那么最好将该代码封装成一个函数，并在需要时调用该函数。这样可以避免代码重复和维护问题。

希望这篇文章能够对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31625