How to Get File Name Extensions in JavaScript

1. Get File Extension Using the .split() and .pop() Methods in JavaScript
2. Get File Extension With the .substr() Method in JavaScript
3. Get File Extension With the .slice() Method in JavaScript
4. Get File Extension With the ES6 Object Destructuring Method

File names come with an extension, which helps the Operating System and the user identify the file type. Most extensions are three characters long, but at times it may be more. For instance, the older Microsoft office extensions like the .doc, .xls, .ppt, used to be three characters, but the newer extensions like the .docx, .xlsx, .pptx are four characters. Let us look at few ways to extract the extension part from a file name using inbuilt javascript methods.

Get File Extension Using the .split() and .pop() Methods in JavaScript

The .split() function splits a string into an array of strings. It breaks the string into an array of substrings based on some pattern that passed as the first parameter to the function. And the .pop() is an inbuilt function in javascript that removes the last element of an array and returns it. Hence, we can use a combination of these methods to get the extension out from a file name. Let us look at the following code to understand the usage.

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

Output:

txt
xlsx

In the code, we use the .split(".") function to split the filename string by . to break it down into multiple pieces. The .pop() function returns the last value of the broken filename array. The JavaScript .pop() function alters the string array on which we apply it.

The approach will work well even for filenames having multiple . in them. The .split(".").pop() will return the last piece from the split file name. Hence it is a smart method to get file extension from a given filename.

Get File Extension With the .substr() Method in JavaScript

For extracting the filenames, we employ string operations as we are dealing with the file name string. Another way to get the extension is by using the substr() function. As the name suggests, the substring() function returns a piece of a string defined by the indices passed as parameters to this function. It takes two parameters, the starting index and the ending index. The function returns the string between the starting and the ending index, including the character at the starting index and excluding the character at the ending index. Hence, we can use the substring function for extracting the extension of a file. Refer to the following code.

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

Output:

txt
xlsx

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

Output:

txt
xlsx

Get File Extension With the .slice() Method in JavaScript

We are dealing with the string datatype for the file name. Hence, we can apply the string operators. One such operator is the .slice() method. It works similar to the substr() function and returns a section of array defined by the start index and the end index. If we pass only one value to the slice() function, it will consider that index value as the start index. And will return the string from that point. Refer to the following code for using slice to get the file extension.

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

Output:

txt
xlsx

The .slice() function does not tamper with the string on which we apply it. Hence, we can use the method easily without any reservations. It is also a faster method to extract the file extension from the file name string.

Get File Extension With the ES6 Object Destructuring Method

Object destructuring is a newer feature introduced in the ES6 standard. With it, we can break open a javascript object and bind these properties to variables. We can use it to get the extension from a file name. Refer to the following code.

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

Output:

txt

The code uses the split(".") function of javascript to split the file name using the "." to get an array of file name parts. It will include the file name and the extensions returned in different indices of the array output by the .split() function. The .reverse() method reverses the array on which we apply it. The first element of the reversed array will hold the extension value. We further extract the ext variable in [ext, ...fileName] using the JavaScript object destructuring mechanism of ES6 javascript. Finally, we can log the ext to get the file extension.