Obtenha extensões de nome de arquivo em JavaScript

Nithin Krishnan 12 outubro 2023
  1. Obtenha a extensão do arquivo usando os métodos .split() e .pop() em JavaScript
  2. Obtenha a extensão de arquivo com o método .substr() em JavaScript
  3. Obtenha a extensão do arquivo com o método .slice() em JavaScript
  4. Obtenha a extensão do arquivo com o método ES6 object desestruturando
Obtenha extensões de nome de arquivo em JavaScript

Os nomes dos arquivos vêm com uma extensão, que ajuda o sistema operacional e o usuário a identificar o tipo de arquivo. A maioria das extensões tem três caracteres, mas às vezes pode ter mais. Por exemplo, as extensões mais antigas do Microsoft Office, como .doc, .xls, .ppt, costumavam ter três caracteres, mas as extensões mais recentes, como .docx, .xlsx, .pptx São quatro caracteres. Vejamos algumas maneiras de extrair a parte da extensão de um nome de arquivo usando métodos javascript embutidos.

Obtenha a extensão do arquivo usando os métodos .split() e .pop() em JavaScript

A função .split() divide uma string em um array de strings. Ele divide a string em uma matriz de substrings com base em algum padrão que é passado como o primeiro parâmetro para a função. E o .pop() é uma função embutida em javascript que remove o último elemento de um array e o retorna. Portanto, podemos usar uma combinação desses métodos para obter a extensão de um nome de arquivo. Vejamos o código a seguir para entender o uso.

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

Produção:

txt
xlsx

No código, usamos a função .split(".") Para dividir a string do nome do arquivo por . para dividi-lo em várias partes. A função .pop() retorna o último valor do array quebrado do nome do arquivo. A função JavaScript .pop() altera a matriz de string na qual a aplicamos.

A abordagem funcionará bem mesmo para nomes de arquivo com vários . neles. O .split(".").pop() retornará a última parte do nome do arquivo dividido. Portanto, é um método inteligente para obter a extensão do arquivo de um determinado nome de arquivo.

Obtenha a extensão de arquivo com o método .substr() em JavaScript

Para extrair os nomes dos arquivos, empregamos operações de string, pois estamos lidando com a string do nome do arquivo. Outra maneira de obter a extensão é usando a função substr(). Como o nome sugere, a função substring() retorna um pedaço de uma string definida pelos índices passados ​​como parâmetros para esta função. Leva dois parâmetros, o índice inicial e o índice final. A função retorna a string entre o índice inicial e final, incluindo o caractere no índice inicial e excluindo o caractere no índice final. Portanto, podemos usar a função substring para extrair a extensão de um arquivo. Consulte o código a seguir.

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

Produção:

txt
xlsx
Observação

Conforme descrito no código acima, a função substr() aceita valores inteiros negativos como parâmetros também. Ao contrário dos índices normais de início e fim, o valor inteiro negativo pede ao método para exibir os últimos caracteres da string conforme especificado pelo parâmetro numérico.

Use substr() apenas se tivermos certeza sobre o comprimento da extensão. Caso contrário, prefira usar o código à prova de erros a seguir, se não tivermos conhecimento do comprimento da extensão do arquivo. O código a seguir descreve esse uso. Ele usa a função lastIndexOf() em javascript para descobrir a última posição onde o . está presente e, em seguida, usa-o como uma referência para retornar a extensão.

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

Produção:

txt
xlsx

Obtenha a extensão do arquivo com o método .slice() em JavaScript

Estamos lidando com o tipo de dados da string para o nome do arquivo. Portanto, podemos aplicar os operadores string. Um desses operadores é o .slice(). Funciona de forma semelhante à função substr() e retorna uma seção do array definida pelo índice inicial e o índice final. Se passarmos apenas um valor para a função .slice(), ela considerará esse valor de índice como o índice inicial. E retornará a string a partir desse ponto. Consulte o código a seguir para usar o slice para obter a extensão do arquivo.

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

Produção:

txt
xlsx

A função .slice() não altera a string na qual a aplicamos. Portanto, podemos usar o método facilmente, sem quaisquer reservas. É também um método mais rápido para extrair a extensão do arquivo da string do nome do arquivo.

Obtenha a extensão do arquivo com o método ES6 object desestruturando

A desestruturação de objetos é um recurso mais recente introduzido no padrão ES6. Com ele, podemos abrir um objeto javascript e vincular essas propriedades a variáveis. Podemos usá-lo para obter a extensão de um nome de arquivo. Consulte o código a seguir.

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

Produção:

txt

O código usa a função split(".") Do javascript para dividir o nome do arquivo usando "." Para obter um array de partes do nome do arquivo. Ele incluirá o nome do arquivo e as extensões retornadas em diferentes índices da saída do array pela função split("."). O método .reverse() inverte a matriz na qual o aplicamos. O primeiro elemento do array invertida manterá o valor da extensão. Extraímos ainda a variável ext em [ext, ...fileName] usando o mecanismo de desestruturação de objetos JavaScript do javascript ES6. Finalmente, podemos registrar o ext para obter a extensão do arquivo.

Artigo relacionado - JavaScript File