Substrings in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

The following are the 3 methods in JavaScript that can be used to retrieve a substring from a given string.
substring()
substr()
slice()

substring() method : This method has 2 parameters start and end. start parameter is required and specifies the position where to start the extraction. end parameter is optional and specifies the position where the extraction should end. The character at the end position is not included in the substring. If the end parameter is not specified, all the characters from the start position till the end of the string are extracted. If the value of start parameter is greater than the value of the end parameter, this method will swap the two arguments. This means start will be used as end and end will be used as start.

Extract the first 10 characters

var str = "JavaScript Tutorial";
alert(result);

Output : JavaScript

If the value of start parameter is greater than the value of the end parameter, then start will be used as end and end will be used as start
var str = "JavaScript Tutorial";
alert(result);

Output : JavaScript

substr() method : This method has 2 parameters start and count. start parameter is required and specifies the position where to start the extraction. count parameter is optional and specifies the number of characters to extract. If the count parameter is not specified, all the characters from the start position till the end of the string are extracted. If count is 0 or negative, an empty string is returned.

Extract the first 10 characters

var str = "JavaScript Tutorial";
alert(result);

Output : JavaScript

If the count parameter is not specified, all the characters from the start position till the end of the string are extracted

var str = "JavaScript Tutorial";
alert(result);

Output : Tutorial

slice() method : This method has 2 parameters start and end. start parameter is required and specifies the position where to start the extraction. end parameter is optional and specifies the position where the extraction should end. The character at the end position is not included in the substring. If the end parameter is not specified, all the characters from the start position till the end of the string are extracted.

Extract the first 10 characters

var str = "JavaScript Tutorial";
alert(result);

Output : JavaScript

If the end parameter is not specified, all the characters from the start position till the end of the string are extracted

var str = "JavaScript Tutorial";
alert(result);

Output : Tutorial

What is the difference between substr and substring methods
The difference is in the second parameter. The second parameter of substring() method specifies the index position where the extraction should stop. The character at the end position is not included in the substring. The second parameter of substr() method specifies the number of characters to return.

Another difference is substr() method does not work in IE8 and earlier versions.

What is the difference between slice and substring
If start parameter is greater than stop parameter, then substring will swap those 2 parameters, where as slice will not swap.

Another method that is very useful when extracting a substring is indexOf() method. This method returns the position of the first occurrence of a specified value in a string. If the specified value is not present then -1 is returned.

Example : Retrieve the index position of @ character in the email

alert(result);

Output : 6

In our next video, we will discuss a simple real time example of where we can use indexOf() and substring() methods

[waleedahmed]

slice is also used to empty the array like this:
var arraylist=[1, 2, 3, 4, 5, 6];
console.log(arraylist);
console.log(arraylist.slice(arraylist.length, 0));

where substring is working only with string

[rflw_o]

Very helpful, everything's explained clearly

[liedebunker]

I found out the reason for subStr(), and it's a VERY IMPORTANT one.

For example, I need to detect if the first three characters of a string, inputString, are "666". Here I cannot use subString(0, 3) because I would get an "inputString.subString() is not a function" error. The reason for the error is that when the input is "666", there is no character at position "3", i.e. the fourth (4th) position. To get a character at "3" would be out of range of the input string. The slice() method has the same problem.

Therefore I HAVE TO use inputString.subStr(0, 3) here because the "3" here is the length of the sub string I want, not the position.

It can be said that it's almost impossible to achieve the goal here if there was not such a method as subStr(). Similar methods also exist in Java, C++ etc.

[TheEvilJade]

alert("abc".substr(1, 2)); // returns "bc"
alert("abc".substring(1, 2)); // returns "b"
The slice() method returns the selected elements in an array, as a new array object

[entertainallpeoples]

Sir in this substring(first, last) function first parameter means is starting index number and last parameter means is length of the string from first parameter index not a index number

[prasadu]

Hi Sir, Actually string.substr(9, 0) will not swap the start and end positions but in string.substring(9, 0) method is doing that.Plz check and correct it .

[parmindersingh-vbqy]

slice: Extract a substring from the given starting index up to, but not including, the ending index. It can operate with negative indices and is applicable to arrays.

substring: Extract a substring from the specified starting index up to, but not including, the ending index. It can only operate with positive indices and does not work with arrays.

substr: Extract a substring with a specified number of characters from the given starting index. It can operate with negative indices and is not applicable to arrays.

[jayantkanugovi]

I think substring has second parameter as index to stop and substr has second parameter as the length instead of an index

[krishnamohanj]

Do subtring and slice methods do the same jobs ?

[georgemills-lamptey]

kudvenkat. Good work . Please how can I get your source code

[naggie]

Hello Sir..
could you please make a lecture on career in .Net for the graduates who wants to get started now. What it takes for them to be successful like you and how to project them after every year as the work goes and How the goals should be to be really successful as a .net developer.

I have just graduated and working as a .net developer for the state of NJ and I have no idea whether to stick happily with what I have now or How do I make myself better as I continue being in this job and How the career levels Be. Instead counting on experience by being in a company for years and then start looking for better opportunities, How do I improve learning everyday and climb up the ladder for better positions and better work places in early stages. You are really helpful for millions of developers out there. 

Thank you in Advance.

[trall]

.slice() is used to have a shallow copy of the array. not a deep copy.