Obtener extensiones de nombre de archivo en JavaScript

Nithin Krishnan 12 octubre 2023
  1. Obtenga la extensión del archivo utilizando los métodos .split() y .pop() en JavaScript
  2. Obtenga la extensión de archivo con el método .substr() en JavaScript
  3. Obtenga la extensión de archivo con el método .slice() en JavaScript
  4. Obtenga la extensión de archivo con el método Desestructuración de objetos ES6
Obtener extensiones de nombre de archivo en JavaScript

Los nombres de archivo vienen con una extensión, que ayuda al sistema operativo y al usuario a identificar el tipo de archivo. La mayoría de las extensiones tienen tres caracteres, pero a veces pueden tener más. Por ejemplo, las extensiones de Microsoft Office más antiguas como .doc, .xls, .ppt, solían tener tres caracteres, pero las extensiones más nuevas como .docx, .xlsx, .pptx Son cuatro caracteres. Veamos algunas formas de extraer la parte de extensión de un nombre de archivo utilizando métodos incorporados de JavaScript.

Obtenga la extensión del archivo utilizando los métodos .split() y .pop() en JavaScript

La función .split() divide una cadena en un array de cadenas. Divide la cadena en una matriz de subcadenas basándose en algún patrón que pasó como primer parámetro a la función. Y .pop() es una función incorporada en javascript que elimina el último elemento de un array y lo devuelve. Por lo tanto, podemos usar una combinación de estos métodos para obtener la extensión de un nombre de archivo. Veamos el siguiente código para comprender el uso.

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

Producción :

txt
xlsx

En el código, usamos la función .split(".") Para dividir la cadena del nombre del archivo por . para dividirlo en varias partes. La función .pop() devuelve el último valor del array de nombre de archivo rota. La función JavaScript .pop() altera el array de cadenas en la que la aplicamos.

El enfoque funcionará bien incluso para nombres de archivo que tengan varios . en ellos. El .split(".").pop() devolverá la última pieza del nombre del archivo dividido. Por lo tanto, es un método inteligente para obtener la extensión de archivo de un nombre de archivo determinado.

Obtenga la extensión de archivo con el método .substr() en JavaScript

Para extraer los nombres de archivo, empleamos operaciones de cadena ya que estamos tratando con la cadena de nombre de archivo. Otra forma de obtener la extensión es usando la función substr(). Como sugiere el nombre, la función substring() devuelve una parte de una cadena definida por los índices pasados ​​como parámetros a esta función. Toma dos parámetros, el índice inicial y el índice final. La función devuelve la cadena entre el índice inicial y final, incluido el carácter del índice inicial y excluyendo el carácter del índice final. Por tanto, podemos utilizar la función substring para extraer la extensión de un archivo. Consulte el siguiente código.

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

Producción :

txt
xlsx
Nota

Como se muestra en el código anterior, la función substr() también acepta valores enteros negativos como parámetros. A diferencia de los índices de inicio y finalización habituales, el valor entero negativo pide al método que muestre los últimos caracteres de la cadena según lo especificado por el parámetro numérico.

Utilice substr() sólo si estamos seguros de la longitud de la extensión. De lo contrario, prefiera utilizar el siguiente código infalible si no conocemos la longitud de la extensión del archivo. El siguiente código describe dicho uso. Utiliza la función lastIndexOf() en javascript para averiguar la última posición donde el . está presente y luego lo usa como referencia para devolver la extensión.

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)));

Producción :

txt
xlsx

Obtenga la extensión de archivo con el método .slice() en JavaScript

Estamos tratando con el tipo de datos de cadena para el nombre del archivo. Por tanto, podemos aplicar los operadores de cadena. Uno de esos operadores es el .slice(). Funciona de forma similar a la función substr() y devuelve una sección del array definida por el índice inicial y el índice final. Si pasamos solo un valor a la función .slice(), considerará ese valor de índice como el índice inicial. Y devolverá la cadena desde ese punto. Consulte el siguiente código para utilizar el segmento para obtener la extensión del archivo.

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

Producción :

txt
xlsx

La función .slice() no altera la cadena en la que la aplicamos. Por lo tanto, podemos utilizar el método fácilmente sin reservas. También es un método más rápido para extraer la extensión del archivo de la cadena del nombre del archivo.

Obtenga la extensión de archivo con el método Desestructuración de objetos ES6

La desestructuración de objetos es una característica más nueva introducida en el estándar ES6. Con él, podemos abrir un objeto javascript y vincular estas propiedades a variables. Podemos usarlo para obtener la extensión de un nombre de archivo. Consulte el siguiente código.

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

Producción :

txt

El código usa la función split(".") De javascript para dividir el nombre del archivo usando el "." Para obtener un array de partes del nombre del archivo. Incluirá el nombre del archivo y las extensiones devueltas en diferentes índices del array generada por la función split("."). El método .reverse() invierte el array en la que lo aplicamos. El primer elemento del array invertida contendrá el valor de extensión. Además, extraemos la variable ext en [ext, ...fileName] utilizando el mecanismo de desestructuración de objetos JavaScript de ES6 javascript. Finalmente, podemos registrar la ext para obtener la extensión del archivo.

Artículo relacionado - JavaScript File