В JavaScript существует несколько удобных методов получения имени текущего HTML-файла. Знание текущего имени файла может быть полезно для различных целей, например для динамического создания ссылок или отслеживания просмотров страниц. В этой статье мы рассмотрим различные методы выполнения этой задачи с использованием простого JavaScript. Итак, приступим!

Метод 1: использование объекта document.location

const fileName = document.location.pathname.split('/').pop();
console.log(fileName);

Этот метод использует объект document.location, который предоставляет информацию о текущем URL-адресе. Мы извлекаем последний сегмент URL-пути с помощью функции split()и получаем имя файла с помощью pop(). Этот подход хорошо работает для большинства сценариев.

Метод 2: использование объекта window.location

const fileName = window.location.pathname.split('/').pop();
console.log(fileName);

Подобно предыдущему методу, в этом подходе используется объект window.locationвместо document.location. Оба объекта по сути предоставляют одну и ту же информацию, и вы можете выбрать любой из них по своему усмотрению.

Метод 3: использование window.location.hrefи RegExp

const fileName = window.location.href.match(/[^/]+$/)[0];
console.log(fileName);

С помощью этого метода мы используем свойство window.location.href, которое представляет полный URL-адрес текущей страницы. Применяя регулярное выражение (/[^/]+$/), мы извлекаем последний сегмент URL-адреса, соответствующий имени файла.

Метод 4: доступ к объекту document.currentScript

const fileName = document.currentScript.src.split('/').pop();
console.log(fileName);

Если вы хотите получить имя исполняемого в данный момент файла сценария, этот метод может оказаться полезным. Мы используем объект document.currentScriptдля доступа к элементу сценария, а затем извлекаем имя файла из его атрибута src.

Метод 5: Использование import.meta.urlв модулях ES

const fileName = import.meta.url.split('/').pop();
console.log(fileName);

Для модулей JavaScript (ES-модулей), загруженных с помощью оператора import, вы можете использовать свойство import.meta.urlдля получения имени файла. Этот метод специфичен для модулей и может не работать в немодульных скриптах.

В этой статье мы рассмотрели несколько способов получения имени текущего HTML-файла с помощью JavaScript. Эти методы обеспечивают гибкость в зависимости от ваших конкретных требований. Предпочитаете ли вы получить доступ к URL-адресу, использовать объекты windowили documentили сосредоточиться на файлах сценариев, для вас есть метод. Поэкспериментируйте с этими подходами и выберите тот, который лучше всего соответствует вашим потребностям!