在前端开发中，有时我们需要知道当前页面所在的目录名。比如说，在一个多页面应用程序中，我们可能需要根据当前页面所在的目录名来加载对应的资源文件。
下面是几种获取当前目录名的方法：
方法一：使用window.location.pathname
window.location.pathname 属性返回当前 URL 的路径部分，不包括域名和查询字符串。我们可以通过以下代码获取当前目录名：
const pathName = window.location.pathname;
const directoryName = pathName.substring(0, pathName.lastIndexOf('/'));这里的 pathName 是一个字符串，表示当前页面的路径部分，例如 "/example/index.html"。 lastIndexOf() 方法用于查找字符串中最后出现指定字符的位置，这里我们用它来查找最后一个斜杠的位置，从而得到目录名。
但是需要注意的是，如果当前页面是直接通过浏览器打开的，则会返回空字符串。因此，这种方法只适用于已经部署在服务器上的网站。
方法二：使用document.currentScript.src
document.currentScript 属性返回当前正在执行脚本的 <script> 元素。我们可以通过该元素的 src 属性获取当前脚本文件的 URL，进而获取该文件所在的目录名。
const scriptSrc = document.currentScript.src;
const directoryName = scriptSrc.substring(0, scriptSrc.lastIndexOf('/'));这里的 scriptSrc 是一个字符串，表示当前脚本文件的 URL，例如 "http://example.com/js/main.js"。同样地，我们用 lastIndexOf() 方法来查找最后一个斜杠的位置，从而得到目录名。
需要注意的是，如果当前页面中没有任何脚本文件，或者当前脚本文件是通过动态创建的，则该方法无法获取目录名。
方法三：使用URL对象
URL 对象是 JavaScript 中专门用于处理 URL 的类。它包含了很多有用的属性和方法，其中就包括获取目录名的方法。
const url = new URL(window.location.href); const directoryName = url.pathname.replace(/\/[^/]*$/, '');
这里的 url 是一个 URL 对象，表示当前页面的 URL。 replace() 方法用于将匹配指定正则表达式的文本替换为新的文本，这里用它来删除路径中的文件名部分。
需要注意的是，如果当前页面是直接通过浏览器打开的，则会返回斜杠 "/"，而不是空字符串。
总结
以上三种方法都可以用来获取当前页面所在的目录名。但是需要注意的是，它们都有一些限制和局限性，需要根据实际情况选择合适的方法。
在实际开发中，我们可以根据不同的需求和场景灵活选择方法，并进行必要的兼容性处理。同时，也可以尝试使用一些第三方库或框架来简化这个过程，提高开发效率。
示例代码：https://codepen.io/chatgpt/pen/dyMWejx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14804