On this tutorial, you’ll be taught the other ways you’ll be able to cut up a string into substrings, and when every methodology is beneficial.
Strings will be simply manipulated in JavaScript for various functions — utilizing native strategies obtainable within the language. We’ve lately coated the way to convert a quantity to a string and the way to convert a string to a quantity in JavaScript.
One other manner a string will be manipulated is by extracting components of it for use for one thing else. For instance, you may need a full URL however wish to extract simply the hash half. Otherwise you may need a listing of things separated by commas and wish to use every of this stuff individually.
Cut up a String into Substrings Utilizing substring()
All strings in JavaScript have a substring() methodology. This methodology can be utilized to retrieve a substring at particular indices.
substring() accepts two parameters. The primary one is required, and signifies the index the substring begins at. The second is non-obligatory, and signifies the index the substring ends at. If the second parameter is omitted, the substring will begin on the index supplied as a primary parameter and proceed till the tip of the string.
It’s necessary to notice that the primary parameter is a 0-based index, which means the primary character is at index 0, the second is at index 1, and so forth. One other necessary factor to notice is that the second parameter is one larger than the index you need the substring to finish at. For instance, if you need the string to finish at index 12, you present 13 for the second parameter.
For instance:
const a = 'Bytes and bits';
const b = a.substring(10, 13);
console.log(b);
console.log(a);
On this instance, substring() is used on the variable a to retrieve a substring. The substring begins on the index 10 and ends on the index 13. The returned worth is bit. Discover that substring() returns the substring with out mutating the worth of the variable it’s used on.
See the Pen
Utilizing substring to separate string by SitePoint (@SitePoint)
on CodePen.
Retrieving Indices
Most often, you received’t know the beginning or finish indices of the substring whereas writing the code. The index could possibly be based mostly on different inputs or variables.
In these instances, you need to use the indexOf() methodology. This methodology returns the index of a substring in a string if it happens in it. If the substring doesn’t exist within the string, it returns -1.
When you retrieve the index utilizing indexOf(), you’ll be able to retrieve the substring.
For instance:
const url = 'https://sitepoint.com#chapter_1';
const hash = url.indexOf('#');
if (hash !== -1) {
console.log(url.substring(hash));
}
On this instance, you retrieve the index of the hash character # within the variable url. If the worth of the index shouldn’t be -1, you retrieve the substring from url beginning on the index of the hash.
You possibly can attempt it out within the following CodePen demo.
See the Pen
Utilizing substring with indexOf to separate string by SitePoint (@SitePoint)
on CodePen.
Cut up a String into Substrings Utilizing cut up()
One other helpful strategy to retrieve a substring from a string is the cut up() methodology. In case your string is a listing of things separated by a delimiter, you need to use the cut up() methodology to separate the string into an array of substrings based mostly on the delimiter.
cut up() accepts two non-obligatory parameters. The primary parameter is the delimiter that needs to be used to find out how the string is cut up. If none is supplied, an array is returned with one merchandise which is the string as an entire.
The second parameter is a quantity that limits the variety of substrings returned within the array. If supplied, the string is cut up on the delimiter till the restrict is reached, and the remainder of the textual content within the string will probably be omitted from the array.
For instance:
const str = 'Toyota,Nissan,Mercedes,Tesla';
const automobiles = str.cut up(',');
console.log(automobiles);
On this instance, cut up() is used on a string that accommodates a listing of automobile model names separated by the , delimiter. The returned array accommodates every automobile model identify as an merchandise within the array.
Be aware that cut up() returns the array of substrings with out affecting the worth of the string it’s used on.
The next dwell instance demonstrates how a string separated by commas will be cut up into listing gadgets.
See the Pen
Utilizing cut up to get substrings by SitePoint (@SitePoint)
on CodePen.
Conclusion
On this tutorial, you’ve realized the way to cut up a string into substrings utilizing the strategies substring() and cut up().
substring() is beneficial whenever you wish to retrieve a single substring from a string at a particular index. You should utilize it with indexOf() to retrieve the beginning or ending index of the substring.
cut up(), alternatively, is beneficial when you may have a string that accommodates a listing of things separated by a delimiter, akin to a comma. You possibly can then cut up the string into an array of substrings utilizing cut up().
Should you discovered this text helpful, you might also take pleasure in the next:
