How to Use Substring in JavaScript

The JavaScript substring() method retrieves a range of characters between two index positions. You can use substring() to retrieve characters to the end of a string by omitting an end index position.

A substring is a smaller portion of a larger string. Programmers use substrings to extract the specific data they need from a string.

For example, you could split the day, month, and year of a user’s date of birth into three variables. This would let you store each value on their own instead of storing the date of birth as one variable.

Or you could split a string to get the first two letters of a user’s name. In this guide, we’ll explore how you can use substring in JavaScript.

How to Use the JavaScript Substring Method

The JavaScript substring() method extracts part of a string between two index values. Without a second index value, substring() retrieves all the characters after a particular index number.

The substring() method accepts two arguments:

• The position at which the substring should start; and
• The position where the substring should stop.

Let’s take a look at the syntax for this method:

"test".substring(start, end);

The substring() method is appended to the end of a string. Only the start parameter is required for the substring() method to work.

Substring JavaScript Examples

Retrieve Characters to the End of a String

We have a string that contains the name of a cat. We want to remove the first two characters from the cat’s name and see what is left. To do this, we can use the substring() method:

const catName = "Pickles";
const newCatName = catName.substring(2);
console.log(newCatName);

On the first line of code, we define a variable named catName. We assign this variable the value Pickles. Next, we define a JavaScript variable that gets a substring from the variable catName.

We have used 2 as a parameter in the substring() method. This means that the method will return every letter after the second index in the string. Here’s the output for our example:

ckles

We now can see all the letters that appear after index position 2.

Retrieve Characters in a Range

If we are looking to get part of a string starting from a character and ending at another, we should pass two values into substring(). The first argument is the start character, and the second is the end character.

Let’s retrieve the first three characters of our cat’s name:

const catName = "Pickles";
const newCatName = catName.substring(0,2);
console.log(newCatName);

The output for the above example is as follows:

Pic

Our string contains all characters in the index range of 0 and 3. Remember, strings are indexed from zero. This means that if you want to retrieve the first character from a string you must start your substring at 0.

Retrieve the Last Character

Let’s retrieve the last character of our string. We cannot use negative index numbers with the substring method. Instead, we can use the length method to find the length of a string. Then, we can use that number to retrieve the last character in our string:

const catName = "Pickles";
const newCatName = catName.substring(catName.length -1, catName.length);
console.log(newCatName);

The result is as follows:

s

In this example, catName.length gets the length of our string—the number of characters it has—and returns the last character in the string.

Conclusion

The JavaScript substring() method returns the characters between two index values in a list. If you do not specify an end index value, substring() returns all the characters after a given index position.

Developers use the substring() method to break down a string into multiple parts. This is useful if a developer only needs a particular piece of information from a string.

To learn more about coding in JavaScript, read our guide on the best tutorials for JavaScript beginners.