Извлечение расширения файла из имени с помощью JavaScript

Быстрый ответ

Для извлечения расширения файла в JavaScript можно найти последнюю точку в строке и вернуть все, что идёт за ней:

const extension = 'example.png'.split('.').pop();
console.log(extension); // Выведет: 'png'

Этот краткий код определяет последнюю точку в названии файла и возвращает все символы после неё — обычно это и является расширением файла.

Работа со сложными случаями

При разработке на JavaScript не все задачи получаются решить гладко и легко. Например, имя файла может содержать несколько точек или быть скрытым файлом, начинающимся с точки. Но не волнуйтесь — мы подготовили решения и для таких, не самых тривиальных, случаев.

Рассмотрим функцию, которая поможет справиться с описанными выше трудностями:

function getFileExtension(filename) {
  // Если точек нет в названии файла или он скрытый, возвращаем пустую строку.
  if (!filename.includes('.') || filename[0] === '.') return '';
  
  // Ищем расширение между точками
  let extension = filename.split('.').pop();
  
  // Не забываем, что 'PNG' и 'png' – это разные вещи.
  return extension.toLowerCase();
}

Не прибегаем к split

Энтузиасты оптимизации, это именно то, что вам нужно! Если вы задумались: "Стоит ли создавать целый массив для такой незначительной задачи?" Предлагаем вам альтернативный вариант с использованием методов substring и lastIndexOf:

const getExtension = (filename) => {
  let lastIndex = filename.lastIndexOf('.');

  // Если точка стоит на первом месте или вовсе отсутствует, возвращаем пустую строку.
  if (lastIndex < 1) return '';

  // И вот, расширение файла уже у вас в руках.
  return filename.substring(lastIndex + 1).toLowerCase();
};

Волшебство регулярных выражений

Если вы цените точность и готовы к магии регулярных выражений, предложим вам воспользоваться немного магии для более точного извлечения расширения:

const regex = /(?:\.([^.]+))?$/;
const extension = regex.exec('example.png')[1]; // 'png'

Сравнение методов по скорости выполнения

Существует ли универсальная и самая эффективная методика для извлечения расширения файла? Для ответа на этот вопрос проведём тестирование скорости выполнения.

• Метод split-pop: эффективен для коротких имён файлов.
• Substring-lastIndexOf: подходит для обработки длинных имен файлов.
• Регулярные выражения: незаменимы при необходимости точности, но могут работать медленнее других методов.

Визуализация

Представим этот процесс как ящик с носками. Каждая пара обозначена своей меткой:

Чтобы отыскать носки с необходимым узором, достаточно найти соответствующую метку:

let fileName = "sock.stripe";
let extension = fileName.split('.').pop(); // возвращает `.stripe`

До: 🧦📁[sock.stripe, sock.dot, sock.plain]
После: Нашли метку 🔍 – `.stripe`

Таким образом, как метка помогает определить узор носка, точка в названии файла указывает на его расширение. 🧦✨

Работаем со сложноименованными файлами

На этом мы не останавливаемся: допустим, что возникла необходимость справиться с именами файлов, содержащих версии или именами с несколькими расширениями. Вот тогда начинается настоящая работа. Поехали:

const multipleExtensionHandler = (filename) => {
  let filenameOnly = path.basename(filename);
  
  // Сканируем имя, начиная с первой точки.
  return filenameOnly.split('.').pop();
}

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

1. String.prototype.split() — JavaScript | MDN — Подробное описание метода split().
2. Array.prototype.pop() — JavaScript | MDN — Инструкция по использованию pop().
3. How can I get file extensions with JavaScript? — Stack Overflow — Обсуждение на StackOverflow, которое вдохновляет многих.
4. Blob: type property — Web APIs | MDN — Справочник MIME-типов.
5. Link anatomy · GitHub — Регулярное выражение для определения расширения файла.
6. Path | Node.js v21.6.1 Documentation — Обработка расширения файла на серверное стороне с помощью Node.js.
7. file-extension — npm — Если работаете с Node.js, используйте соответствующие инструменты.