Introducing the Javascript substring() method

Javascript is nowadays the most used programming language in the world: 97% of all websites utilize it as a client-side programming language. Its popularity and advantages make it mandatory to be familiar with all the behind-the-scenes, including data manipulation.

Javascript offers different options to parse and extract data. Among those, we find Javascript Substring, Substr, and Slice. All of them are methods that enable extracting strings from a larger one. We’ll dive deep into our favorite one: Javascript Substring. But don’t worry, we’ll discuss the rest a little bit too, so you can compare them and make your own decision.

The Javascript substring() is an inbuilt method in Javascript that returns a part of a given string—a substring—from start to end indexes:

str.substring(startIndex, endIndex)

But what’s a substring in deep? A substring is a subset from another string. Let’s explain it with an easy example. Imagine our original string: “I’m exploring how to use the Javascript substring() method; it’s really useful!”. One substring could be “I’m exploring how to use the Javascript substring() method”, and another substring could be “the Javascript substring() method is really useful!”. In some cases, you’ll need just one string, but sometimes you’ll need more; that’s why we use two substrings in our example.

To get the substrings for you, the Javascript substring() method gets one part of the original string and returns it as a new string. In order to complete this task, the Javascript substring() method relies on two parameters:

• startIndex: it’s where the substring should begin, and it’s about clarifying the first character that must be included in the returned substring.
• endIndex: this one is optional, and it’s the end of the substring. It’s the opposite of the startIndex. This one specifies the first character that must be excluded from the returned substring.

You must keep them in mind when using the Javascript substring() method because, for instance, if you decide to leave the endIndex behind, the substring() will return the substring to the end of the string. Or if any parameter is NaN (not a number), then the substring() will work with them as if it were zero.

Plus, if you make the startIndex the same as the end one, the returned substring will be empty. Another point to pay attention to when working with these indexes is that if any of them is less than zero or bigger than the string length, then the startIndex will become the endIndex and vice versa. And last but not least: if the startIndex is bigger than the end one, then the substring() method will switch the roles so the startIndex will be the endIndex and vice versa.

We’ve already talked about the parameters. Now how to make the Javascript substring() work? Let’s see what the substring() syntax looks like first:

string.substring(indexA, indexB)

indexA is the startIndex, and it’s between zero and one less character than the length of the string—remember the scenarios we discussed before if it’s greater than the length of the string—. While indexB is the endIndex, between 0 and the length of the string, as we said before, it’s optional. So the indexing should always start from zero.

The substring() method will give you a new substring based on those indexes or parameters. For example, if you give it this input:

const str = “Welcome to Our Javascript Tutorial”;

console.log(str.substring(3, 7));

console.log(str.substring(0, 10));

console.log(str.substring(11));

You’ll get this output:

come

Welcome to

Our Javascript Tutorial

Let’s start with what unites them: the three of them can help you extract parts of a string and give them back to you in a new string without changing the original string. We’ve seen that the substring() method does that by working with the starIndex and the endIndex, leaving out the endIndex character and/or going up to the end of the string.

While the substr() method works with the startIndex and Length parameters, returning only the part of the string between the start and the number of characters you specify after the startIndex.

Slice() method is quite close to the substring() one. This is because it returns the part of the selected string between the starIndex and the endIndex. But, for instance, if the first parameter is greater than the second one, slice() doesn’t perform, while substring(), as we’ve seen before, will switch the arguments and perform normally.

Want to know how to use the Javascript substring() method and how it can help you? You’re in the right place, then. We’ll explore some examples of the tasks that this method can ease.

1) Get a substring from the very first start

If you’re looking to extract a substring from the beginning of the string, then you can follow this example:

const str = 'Javascript Substring';

const substring = str.substring(0,10);

console.log(substring);

The output you’ll get is: 

Javascript

2) Together from here until the end

To make the method return a substring to the end of the string, check out this example that extracts the substring from the index 11 to the end:

let str = 'Javascript Substring';

let substring = str.substring(11);

console.log(substring);

You’ll get this output:

Substring

3) Looking to extract a domain from the email 

To get the domain from the email, pay attention to this example that uses the substring() with the indexOf()—which basically returns the position of the @—: 

const email = 'test@gmail.com';

const domain = email.substring(email.indexOf('@') + 1);

console.log(domain); 

You’ll get this output:

gmail.com

After that, the substring will give you the domain that goes from the index of @ plus one until the end of the string.

Interested in learning from step-by-step guides and other news for tech fans like you? Don’t miss them out on our blog.