Извлечение расширения из имени файла на 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")); // Вывод: пустая строка

Полезные материалы

1. String.prototype.split() – JavaScript | MDN — подробная информация о разделении строк.
2. String.prototype.substring() – JavaScript | MDN — справка по извлечению подстрок.
3. How can I get file extensions with JavaScript? – Stack Overflow — обсуждение различных методов получения расширений файлов.
4. RegExp – JavaScript | MDN — acquaintance with regular expressions.
5. JavaScript String lastIndexOf() Method — информация о методе lastIndexOf() в пошаговом руководстве.
6. Path | Node.js v21.6.1 Documentation — для Node.js информация о методе path.extname().
7. file-extension – npm — пакет NPM для работы с расширениями файлов.