substring() method extracts parts of a string according to a custom argument and returns a substring.
In programming, there are often cases where you need to get a specific portion of text from a larger string. Let’s say a user inputs their date of birth into your website in one field, and you want to store the day, month, and year separately. What do you do?
"This is an example string."
There are three ways you can write a string. You can use backticks (
``), single quotes (
' '), or double quotes (
" "). The type of quote you use doesn’t matter, as long as those quotes match on both sides.
You can also store strings in a variable, like this:
const ourString = "This is our example string"; console.log(ourString)
This code assigns our string to the variable
ourString, then prints it out to the console for the user.
But what if you wanted to extract the first few letters in the string? Or the last few letters? Or a couple of letters from the middle of the string?
You could ask the user to input the data you need separately, but that may be a lot of work and result in a suboptimal user experience. Instead, you can use the
substring() method allows you to extract parts of a string and return just those characters.
Here is an example of the
substring() method in use:
const catName = "Pickles"; const newCatName = catName.substring(2); console.log(newCatName);
There’s a lot going on in this example, so let’s break it down. On the first line, we define a variable named
catName and assign it the value
Pickles. Then, on the second line, we define a variable that gets a substring from the variable
In our example, we have used
2 as a parameter in the
substring() function, which means that the method will return every letter after the second index in the string (remember, indexes start at
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 being the start character, and the second being the end character. Here’s an example:
const catName = "Pickles"; const newCatName = catName.substring(0,2); console.log(newCatName);
The output for the above example is as follows:
So, the first value in the
substring() method is the character where we want to start, and the second value is the character where we want our substring to end. The first value is the start index and the second value is the end index.
If you only want to get the last character in the string, you could use this code:
const catName = "Pickles"; const newCatName = catName.substring(catName.length -1, catName.length); console.log(newCatName);
The result is as follows:
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.
const catName = "Pickles"; const newCatName = catName.slice(0,2); console.log(newCatName);
Here’s the output of this example:
You can also use the
So, if we want to get three characters from a string, starting from the third character, we would use the following code:
const catName = "Pickles"; const newCatName = catName.substr(2, 3); console.log(newCatName);
In this case, the output is as follows:
In addition, you can pass a negative start index to the
substr() method, which will return a value counted from the end of the string. If we wanted to get the last three characters of our string, we would use the following code:
const catName = "Pickles"; const newCatName = catName.substr(-3); console.log(newCatName);
Here’s the output of our code:
substr() methods. We have also explored the main difference between these methods and looked at example use cases.
Overall, these two methods can be useful when you’re working with strings and need to get certain values from a string. If you need to get the first letter of a user’s name, or the last four numbers in their case ID, these methods are very helpful.