What is a JS substring?
A substring is a string that is a part of another string.
We’ll learn how to get a substring using the three distinct built-in methods in this article.
The substring( ) Method
Let’s have a look at the substring() technique first.
- This technique extracts a portion of the original string and replaces it with a new string
- Two parameters are required by the substring method
- The substring() function pulls characters from a string and returns the substring between two indices (positions)
- The substring() method removes characters from the beginning to the end of a string (exclusive)
- The original string is not changed by the substring() technique
- If the start is bigger than the end, the two arguments will be swapped, (4, 9) = (9, 4)
- Start and end are considered as 0 if they are less than 0
Some other considerations:
The substring method results in an empty string if startIndex = endIndex. It returns an empty string if startIndex and endIndex are greater than the length of the string.
let text = "Hello Codeunderscored!"; console.log(text.substring(24, 30))
Now, let’s define the parameters in the above syntax.
- It indicates the starting point where to begin extraction. Usually, index 0 is the index for the first character.
- It is optional to have the end parameter
- This position indicates the stopping point of the extraction. Though, it usually is up to this value but not inclusive. On the off chance that it is omitted, then it is the rest of the string.
As shown in the example below, any value not a number (NaN) is treated as zero.
const str = "Codeunderscored is simply scaling the heights!"; console.log(str.substring('start', 3));
The argument ‘start’ in the above example is not a number. As a result, the generated string starts at position zero of str. In addition, the substring() function returns a copy of the string it acts on if no arguments are supplied and both parameters are omitted.
Example 1: extract string starting from 3rd position
let text = "Hello Codeunderscored!"; console.log(text.substring(3));
Example 2: substring when the starting point is greater than the end
If startIndex is more than endIndex, the substring method swaps the arguments and returns a substring, presuming endIndex is greater than startIndex.
let text = "Hello Codeunderscored!"; console.log(text.substring(30, 4))
Example 3: In case the starting point is negative ( less than 0), reset start index to 0:
let text = "Hello Codeunderscored!"; console.log( text.substring(-2));
Example 4: extract the first value from a string
let text = "Hello Codeunderscored!"; console.log( text.substring(0, 1));
Example 5: How to extract the last value in the given string
let str = "Hello Codeunderscored!"; console.log(str.substring(str.length – 1));
The substr() method
According to Mozilla’s documentation, the substr() method is a legacy function that should not be used. However, we’ll explain what it does because it may appear in some earlier projects, or you may find a use for it.
The substr() method returns a substring of the original string and requires the following two parameters:
- startIndex: indicates the substring length’s starting point
- length: the total amount of characters that must be included (optional)
The difference with substring() is that the substr() method expects a length instead of an endIndex as the second parameter:
This example counts four characters beginning with the supplied startIndex(2) and returns them as a substring.
If the second parameter isn’t defined, it returns up to the end of the original string (much as the previous substring method). Below is an example.
Similar to the substring() method, the slice() method returns a substring of the original string. Further, the same two parameters are required by the slice method:
- startIndex: denotes the beginning of the substring.
- endIndex: it is the substring’s termination point and is optional most of the time.
Similarities between the substring() and slice() methods
The following are some of the similarities between the substring() and slice() methods.
We get a substring starting from the specified index number until the end of the original text if we don’t set an ending index as shown below.
If we set both the startIndex and endIndex, we’ll obtain the characters in the original text between the specified index numbers:
An empty string is returned if startIndex and endIndex are larger than the length of the string.
Differences between slice() and other methods:
An empty string is returned by the slice() method if startIndex > endIndex.
If startIndex is a negative value, the first character in the string is read from the end (reverse):
We hope you found this helpful article. If so, share with us your thoughts.