Извлечение расширения из имени файла на Javascript
Быстрый ответ
Для извлечения расширения из названия файла в Javascript воспользуйтесь методами String.prototype.slice()
и String.prototype.lastIndexOf()
. Данные функции позволят найти позицию последней точки в имени файла и извлечь подстроку, идущую за ней – так мы получим расширение файла.
let filename = "example.png";
let extension = filename.slice(filename.lastIndexOf('.') + 1);
console.log(extension); // Вывод: png
Данный подход корректно обрабатывает имена файлов, содержащих несколько точек, поскольку расширение всегда следует после последней из них.
let filename = "archive.tar.gz";
let extension = filename.slice(filename.lastIndexOf('.') + 1);
console.log(extension); // Вывод: gz
В случае, когда расширение в имени файла отсутствует, результатом станет пустая строка.
Подробное объяснение с использованием regex
Регулярные выражения (Regex) предоставляют более гибкий инструмент для обработки имен файлов, в том числе в случаях, когда расширения файлов отсутствуют или имеются несколько расширений.
let regex = /(?:\.([^.]+))?$/;
let filename = "archive.tar.gz";
let matches = regex.exec(filename);
let extension = matches ? matches[1] : '';
console.log(extension); // Вывод: gz
Данное выражение учитывает следующие аспекты:
- Незахватывающую группу
(?: )
, исключающую точку из результата. - Захватывающую группу
([^.]+)
, позволяющую найти последовательности символов, не включающих точку. - Необязательный блок, обозначаемый знаком
?
, для работы с именами файлов без расширения. - Якорь
$
, указывающий на конец строки, предполагающий, что именно там мы и ожидаем найти расширение файла.
Такая конструкция позволяет универсально обработать различные варианты имен файлов.
Погружение в универсальные методы
В программировании не существует универсального решения для каждой задачи, поэтому давайте рассмотрим несколько подходов, применимых в различных ситуациях.
Использование split и pop
Разделив имя файла по символу точки и извлеков последний элемент из полученного массива, можно легко получить расширение.
let filename = "my.report_2023.xlsx";
let extension = filename.split('.').pop();
console.log(extension); // Вывод: xlsx
Использование lastIndexOf()
Метод lastIndexOf()
позволяет указать на начало подстроки, представляющей собой расширение файла.
let filename = "photo.jpg";
let extension = filename.substring(filename.lastIndexOf('.') + 1);
console.log(extension); // Вывод: jpg
Обработка специальных случаев
Особое внимание требуют файлы без расширения, файлы с точкой в начале имени и пути к каталогам – они требуют специальной обработки.
// Файл без расширения
let filename = "README";
let extension = filename.includes('.') ? filename.slice(filename.lastIndexOf('.') + 1) : '';
console.log(extension); // Вывод: пустая строка
// Файл с точкой в начале имени
filename = ".vimrc";
extension = filename.slice(filename.indexOf('.') + 1);
console.log(extension); // Вывод: vimrc
// Путь к каталогу
filename = "/path/to/folder/";
extension = filename.endsWith('/') ? '' : filename.split('.').pop();
console.log(extension); // Вывод: пустая строка
Включение точки
Если сохранить точку в расширении требуется, то достаточно лишь немного изменить способ применения метода slice .
let extensionWithDot = filename.includes('.') ? filename.slice(filename.lastIndexOf('.')) : '';
console.log(extensionWithDot); // Вывод: .png
Визуализация
В качестве визуализации данной задачи представим имя файла в виде поезда, где расширение является последним вагоном данного поезда.
Поезд имени файла: [📄🔗🔗🔗.📄🔗🔗.🔗🗂️]
Отделим расширение:
let extension = filename.split('.').pop();
Теперь имеем:
Расширение: [🗂️]
Готово! Теперь расширение нашего файла отделено от остального текста!
Функциональность и удобство использования
Для большего удобства и возможности повторного использования решений, мы можем упаковать один из методов в отдельную функцию.
function getExtension(filename) {
return filename.slice((filename.lastIndexOf(".") + 1) || filename.length);
}
console.log(getExtension("file_with_extension.docx")); // Вывод: docx
console.log(getExtension("no_extension_file")); // Вывод: пустая строка
Работа с путями: поддержка в любой ситуации!
При работе с файловыми путями не забывайте, что путь может включать в себя как файлы, так и каталоги.
function getExtensionFromPath(path) {
let baseName = path.split('/').pop(); // извлекаем имя файла
if(baseName.indexOf('.') === -1 || baseName.startsWith('.')) return ''; // если расширения нет, возвращаем пустую строку
return baseName.slice(baseName.lastIndexOf('.') + 1); // расширение файла
}
console.log(getExtensionFromPath("/path/to/file.txt")); // Вывод: txt
console.log(getExtensionFromPath("/path/without/extension/file")); // Вывод: пустая строка
Полезные материалы
- String.prototype.split() – JavaScript | MDN — подробная информация о разделении строк.
- String.prototype.substring() – JavaScript | MDN — справка по извлечению подстрок.
- How can I get file extensions with JavaScript? – Stack Overflow — обсуждение различных методов получения расширений файлов.
- RegExp – JavaScript | MDN — acquaintance with regular expressions.
- JavaScript String lastIndexOf() Method — информация о методе
lastIndexOf()
в пошаговом руководстве. - Path | Node.js v21.6.1 Documentation — для Node.js информация о методе
path.extname()
. - file-extension – npm — пакет NPM для работы с расширениями файлов.