How to get File Extension from File Name in JavaScript
Table of Contents
Just like any other programming language, you can use JavaScript to work with files.
When you are working with files, one of the most useful things to know is the file's extension.
In this post, we'll learn how to extract the file's extension from the file name in JavaScript.
Extracting the file extension from the file name
To extract the file extension from the file name, we'll use the split()
method.
The split()
method splits a string into an array of substrings using the parameter as the delimiter, and then returns the substrings as an array.
JAVASCRIPTconst fileName = "my-file.txt";
const fileExtension = fileName.split(".");
console.log(fileExtension);
BASH(2) ['my-file', 'txt']
From there, we can use the pop()
method to get the last element in the array.
Let's see the full example:
JAVASCRIPTconst fileName = "my-file.txt";
const fileExtension = fileName.split(".").pop();
console.log(fileExtension);
BASHtxt
This works because in almost all cases, the file extension is the last part of the file name, after the last dot.
For reusability, we can also turn this into a function:
JAVASCRIPTconst getFileExtension = (fileName) => {
return fileName.split(".").pop();
}
const fileExtension = getFileExtension("my-file.txt");
console.log(fileExtension);
BASHtxt
Conclusion
In this post, we looked at how to extract the file extension from the file name in JavaScript.
Simply use the split()
method to split the file name into an array of substrings by splitting on a .
, and then use the pop()
method to get the last element in the array, which is usually the accurate file extension.
Thanks for reading!
- Getting Started with TypeScript
- Getting Started with Solid
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to deploy a .NET app using Docker
- How to deploy a PHP app using Docker
- How to deploy a Node app using Docker
- Getting Started with Sass
- Getting Started with Moment.js
- Getting Started with React
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue