Obtenir des extensions de nom de fichier en JavaScript

Nithin Krishnan 12 octobre 2023
  1. Obtenez l’extension de fichier en utilisant les méthodes .split() et .pop() en JavaScript
  2. Obtenir l’extension de fichier avec la méthode .substr() en JavaScript
  3. Obtenir l’extension de fichier avec la méthode .slice() en JavaScript
  4. Obtenir l’extension de fichier avec la méthode ES6 object destructuring
Obtenir des extensions de nom de fichier en JavaScript

Les noms de fichiers sont accompagnés d’une extension qui aide le système d’exploitation et l’utilisateur à identifier le type de fichier. La plupart des extensions comportent trois caractères, mais parfois cela peut être plus. Par exemple, les anciennes extensions de Microsoft office comme le .doc, .xls, .ppt, avaient trois caractères, mais les extensions plus récentes comme le .docx, .xlsx, .pptx sont quatre personnages. Voyons quelques façons d’extraire la partie extension d’un nom de fichier à l’aide de méthodes javascript intégrées.

Obtenez l’extension de fichier en utilisant les méthodes .split() et .pop() en JavaScript

La fonction .split() divise une chaîne en un tableau de chaînes. Il divise la chaîne en un tableau de sous-chaînes basé sur un modèle qui est passé comme premier paramètre à la fonction. Et le .pop() est une fonction intégrée en javascript qui supprime le dernier élément d’un tableau et le renvoie. Par conséquent, nous pouvons utiliser une combinaison de ces méthodes pour extraire l’extension d’un nom de fichier. Regardons le code suivant pour comprendre l’utilisation.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.split('.').pop());
console.log(file2.split('.').pop());

Production:

txt
xlsx

Dans le code, nous utilisons la fonction .split(".") pour diviser la chaîne de nom de fichier par . pour le décomposer en plusieurs morceaux. La fonction .pop() renvoie la dernière valeur du tableau des noms de fichiers brisés. La fonction JavaScript .pop() modifie le tableau de chaînes sur lequel nous l’appliquons.

L’approche fonctionnera bien même pour les noms de fichiers ayant plusieurs . en eux. Le .split(".").pop() renverra le dernier morceau du nom du fichier divisé. C’est donc une méthode intelligente pour obtenir l’extension de fichier à partir d’un nom de fichier donné.

Obtenir l’extension de fichier avec la méthode .substr() en JavaScript

Pour extraire les noms de fichiers, nous utilisons des opérations de chaîne car nous traitons avec la chaîne de nom de fichier. Une autre façon d’obtenir l’extension est d’utiliser la fonction substr(). Comme son nom l’indique, la fonction substring() renvoie un morceau d’une chaîne définie par les indices passés en paramètres à cette fonction. Elle prend deux paramètres, l’indice de départ et l’indice d’arrivée. La fonction retourne la chaîne de caractères entre l’indice de départ et l’indice d’arrivée, en incluant le caractère à l’indice de départ et en excluant le caractère à l’indice d’arrivée. Nous pouvons donc utiliser la fonction substring() pour extraire l’extension d’un fichier. Reportez-vous au code suivant.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.substr(-3));
console.log(file2.substr(-4));

Production:

txt
xlsx
Noter

Comme illustré dans le code ci-dessus, la fonction substr() accepte également des valeurs entières négatives comme paramètres. Contrairement aux indices de début et de fin habituels, la valeur entière négative demande à la méthode d’afficher les derniers caractères de la chaîne comme spécifié par le paramètre numérique.

N’utilisez substr() que si nous sommes sûrs de la longueur de l’extension. Sinon, préférez utiliser le code infaillible suivant si nous ne connaissons pas la longueur de l’extension du fichier. Le code suivant décrit une telle utilisation. Il utilise la fonction lastIndexOf() en javascript pour déterminer la dernière position où le . est présent, puis l’utilise comme référence pour renvoyer l’extension.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.substr((file1.lastIndexOf('.') + 1 - file1.length)));
console.log(file2.substr((file2.lastIndexOf('.') + 1 - file2.length)));

Production:

txt
xlsx

Obtenir l’extension de fichier avec la méthode .slice() en JavaScript

Nous avons affaire au type de données de chaîne pour le nom de fichier. Par conséquent, nous pouvons appliquer les opérateurs string. L’un de ces opérateurs est le .slice(). Elle fonctionne de manière similaire à la fonction substr() et renvoie une section de tableau définie par l’index start et l’index end. Si nous ne transmettons qu’une seule valeur à la fonction .slice(), elle considérera cette valeur d’index comme l’index de départ. Et retournera la chaîne de caractères à partir de ce point. Reportez-vous au code suivant pour utiliser slice afin d’obtenir l’extension du fichier.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.slice(((file1.lastIndexOf('.') - 1) + 2)));
console.log(file2.slice(((file2.lastIndexOf('.') - 1) + 2)));

Production:

txt
xlsx

La fonction .slice() ne falsifie pas la chaîne sur laquelle on l’applique. Par conséquent, nous pouvons utiliser la méthode facilement sans aucune réserve. C’est également une méthode plus rapide pour extraire l’extension du fichier à partir de la chaîne de caractères du nom du fichier.

Obtenir l’extension de fichier avec la méthode ES6 object destructuring

La déstructuration d’objets est une nouvelle fonctionnalité introduite dans la norme ES6. Avec lui, nous pouvons ouvrir un objet javascript et lier ces propriétés à des variables. Nous pouvons l’utiliser pour obtenir l’extension d’un nom de fichier. Référez-vous au code suivant.

let file1 = 'somefile.txt';
const [ext, ...fileName] = file1.split('.').reverse();
console.log(ext);

Production:

txt

Le code utilise la fonction split(".") de javascript pour diviser le nom de fichier en utilisant le "." pour obtenir un tableau de parties de nom de fichier. Il inclura le nom du fichier et les extensions retournés dans les différents indices du tableau sorti par la fonction split("."). La méthode .reverse() inverse le tableau sur lequel on l’applique. Le premier élément du tableau inversé contiendra la valeur d’extension. Nous extrayons en outre la variable ext dans [ext, ...fileName] en utilisant le mécanisme de déstructuration d’objets JavaScript de javascript ES6. Enfin, nous pouvons enregistrer le ext pour obtenir l’extension du fichier.

Article connexe - JavaScript File