js如何获得当前文件的文件名

在JavaScript中获得当前文件的文件名可以通过__filename、document.currentScript.src等方法实现，这些方法在不同的运行环境中有不同的表现。 其中，__filename在Node.js环境下使用，而document.currentScript.src在浏览器环境中使用。接下来，我们详细探讨这些方法的使用场景和具体实现。

一、Node.js 环境中的文件名获取

在Node.js环境中，获取当前文件的文件名非常简单，主要是通过内置的全局变量__filename来实现。__filename提供了当前模块文件的完整路径和文件名。

1、使用`__filename`

console.log(__filename);

这个代码片段会输出包含文件路径的文件名。为了仅获取文件名而不包含路径，可以使用path模块。

2、结合`path`模块获取文件名

const path = require('path');
console.log(path.basename(__filename));

这个代码片段会输出当前文件的文件名，不包含路径。

二、浏览器环境中的文件名获取

在浏览器环境中，情况稍微复杂一些，因为没有类似于Node.js的__filename。但是，我们可以通过document.currentScript来获取当前执行的脚本信息。

1、使用`document.currentScript`

document.addEventListener('DOMContentLoaded', function() {
    const script = document.currentScript;
    const url = new URL(script.src);
    const filename = url.pathname.split('/').pop();
    console.log(filename);
});

这个代码片段在DOM内容加载完成后，获取当前脚本的src属性，通过URL解析并提取文件名。

三、结合`import.meta`获取文件名（ES模块）

在使用ES模块的现代JavaScript环境中，可以使用import.meta对象来获取模块相关的信息。

console.log(import.meta.url);
const url = new URL(import.meta.url);
const filename = url.pathname.split('/').pop();
console.log(filename);

这个代码片段在ES模块环境中使用import.meta.url来获取当前模块的URL，然后解析出文件名。

四、实现细节和注意事项

1、Node.js环境中的细节

在Node.js中，__filename是一个绝对路径，它包含了从根目录到当前文件的完整路径。为了获取仅文件名，通常需要结合path.basename()方法。

2、浏览器环境中的细节

在浏览器环境中，document.currentScript可能在某些情况下返回null，尤其是在异步执行脚本时。因此，确保在适当的事件（如DOM内容加载完成）中使用它。

3、ES模块的注意事项

使用import.meta时，需要确保代码运行在支持ES模块的环境中，否则会出现错误。

五、最佳实践

根据不同的运行环境，选择合适的方法来获取当前文件的文件名是非常重要的。在实际项目中，可能需要结合多种方法，以确保在不同环境下都能正确获取文件名。

1、在Node.js项目中

const path = require('path');
console.log(path.basename(__filename));

2、在浏览器项目中

document.addEventListener('DOMContentLoaded', function() {
    const script = document.currentScript;
    const url = new URL(script.src);
    const filename = url.pathname.split('/').pop();
    console.log(filename);
});

3、在ES模块项目中

console.log(import.meta.url);
const url = new URL(import.meta.url);
const filename = url.pathname.split('/').pop();
console.log(filename);

六、总结

Node.js中使用__filename和path模块、浏览器环境中使用document.currentScript、ES模块中使用import.meta是获取当前文件文件名的主要方法。根据具体运行环境选择合适的方法，能够有效提高代码的兼容性和健壮性。