Obtenha extensões de nome de arquivo em JavaScript
-
Obtenha a extensão do arquivo usando os métodos
.split()
e.pop()
em JavaScript -
Obtenha a extensão de arquivo com o método
.substr()
em JavaScript -
Obtenha a extensão do arquivo com o método
.slice()
em JavaScript - Obtenha a extensão do arquivo com o método ES6 object desestruturando
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
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.