Uncover the Secrets of JavaScript String Manipulation

Extracting File Extensions with Ease

When working with file names in JavaScript, extracting the extension can be a crucial task. In this article, we’ll explore two effective methods to achieve this using built-in string manipulation techniques.

Method 1: Split and Pop

The first approach involves utilizing the split() and pop() methods. By splitting the file name into an array of individual elements using the . character as the separator, we can then retrieve the last element, which represents the extension, using the pop() method. Let’s dive into an example:

const filename = "module.js";
const extension = filename.split('.').pop();
console.log(extension); // Output: "js"

In this example, filename.split '.' returns an array ["module", "js"], and pop() retrieves the last element, which is the extension "js".

Method 2: Substring and Last Index Of

The second approach leverages the substring() and lastIndexOf() methods. By finding the last occurrence of the . character using lastIndexOf() and adding 1 to account for the 0-based index, we can extract the extension using substring(). Here’s an example:

const filename = "module.js";
const extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length) || filename;
console.log(extension); // Output: "js"

In this example, filename.lastIndexOf('.') + 1 returns the position of the last . character (8), and substring(8, 10) extracts the characters between the given indexes, resulting in the extension "js". The || operator ensures that if no . character is found, the original string is returned.

By mastering these techniques, you’ll be able to effortlessly extract file extensions in your JavaScript applications.