Извлечение расширения файла из имени с помощью 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: подходит для обработки длинных имен файлов.
- Регулярные выражения: незаменимы при необходимости точности, но могут работать медленнее других методов.
Визуализация
Представим этот процесс как ящик с носками. Каждая пара обозначена своей меткой:
Узор носка | Метка |
---|---|
Полосатые | .stripe |
В точку | .dot |
Однотонные | .plain |
Чтобы отыскать носки с необходимым узором, достаточно найти соответствующую метку:
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();
}
Полезные материалы
- String.prototype.split() — JavaScript | MDN — Подробное описание метода
split()
. - Array.prototype.pop() — JavaScript | MDN — Инструкция по использованию
pop()
. - How can I get file extensions with JavaScript? — Stack Overflow — Обсуждение на StackOverflow, которое вдохновляет многих.
- Blob: type property — Web APIs | MDN — Справочник MIME-типов.
- Link anatomy · GitHub — Регулярное выражение для определения расширения файла.
- Path | Node.js v21.6.1 Documentation — Обработка расширения файла на серверное стороне с помощью Node.js.
- file-extension — npm — Если работаете с Node.js, используйте соответствующие инструменты.