The file extension is a three or four-letter abbreviation or an acronym at the end of a file that tells you what kind of file it is under different operating systems. For example, the file name is code.js hence the extension here is js. The goal of this article is to show you how to write a JavaScript program to get file extensions from a file name. We will discuss two of the easiest and most used methods to find the file extension.
Getting File Extension in JavaScript
Method 1: Using split() and pop() Methods
We can use the combination of pop() and split() methods to get the file extension. The split() method returns a new array after splitting a text/string into an array of substrings and it will be separated by the character we passed to it in the method parameter.
Let’s look at an example of a split method where we will initiate a variable with a file name and then split that on the “.” character:
var returned = filename.split(".");
alert(returned); //code, js
We can see in the above screenshot that the code and js are returned as separate separated by a comma.
The pop() method removes/pops the last element of an array or string and returns that as a value. Let’s implement the pop() method in JavaScript:
var returned = filename.pop();
alert(returned); // js
We can see in the below screenshot that the pop() method popped the last element of the filename array and returned it:
Let us now combine the two i-e pop() method and split() method to achieve our task of getting the extension of a file:
//extract file extension
const extension = fileName.split('.').pop();
return extension;
}
// passing the filename
const fileExtension = getFileExtension('code.js');
alert(fileExtension);
In the above code, we made a small function with the name of getFileExtension() so that we don’t have to repeat the process of writing the code again and again. The getFileExtension() function receives a filename parameter and then splits and pops the last element of the filename and returns the result.
Method2: Using substring() and lastIndexOf() Methods
The substring() method is a built-in method of JavaScript that takes two arguments as parameters i-e start and end and extracts characters between those two positions or indices from a string and returns a substring from start till the end and not including the end. Let’s extract the rop from the word aeroplane in JavaScript:
var extract = machine.substring(2, 5);
alert(extract); // rop
The lastIndexOf() method is used to find the location of a specified character or a substring in a string and returns an index value of the last occurrence of a specified value in a string. The lastIndexOf() returns a value of negative one (-1) if the value is not found.
var lastIndex = machine.lastIndexOf("a");
alert(lastIndex); // 6
Let us now combine the two methods, substring() and lastIndexOf() to extract the file extension from a filename:
return fileName.substring(fileName.lastIndexOf(".") + 1);
}
var filename = "code.js";
var extension = getFileExtension(filename);
alert(extension); // js
The fileName.lastIndexOf(“.”)+1 returns the last position or index of the . In the file name and the +1 is because the index starts from 0.
Conclusion
The file extension is the three or four letter abbreviation at the end of the file which identifies the file type. File extensions are important as it tells our computer what icon to use for a file and what software or application can open or edit that file. For example, the doc extension tells our computer that it is a Microsoft word file. Finding extensions is also crucial since there will be instances when we import files into our JavaScript and do actions based on the extension of that file. In this article, we explore the idea of how to write a JavaScript program to get file extensions from a file name.
