Javascript Substring Vs Substr Vs Slice

There are 3 JavaScript functions that are used to process string variable, they are substring(startIdx, endIdx), substr(startIdx, numberOfCharactors), slice(startIdx, endIdx). If you are a JavaScript beginner, you may confuse about the usage of the 3 functions, this article will tell you the difference between them with examples.

1. substring(startIdx, endIdx).

1. This function returns the substring that the character index starts with startIdx value and ends with the endIdx value in this string.
2. The substring contains the character that is located with the startIdx, and does not contain the endIdx located character.
3. Below is an example of the substring(startIdx, endIdx) function.

   var str = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36';
   
   var startIdx = str.indexOf('(');
   
   var endIdx = str.indexOf(')', startIdx + 1);
   
   var subString = str.substring(startIdx + 1, endIdx);
   
   console.log(subString)
   
   // you can see the below output string in web browser inspector console.
   Windows NT 10.0; Win64; x64
   

2. substr(startIdx, numberOfCharactors).

1. This function also returns a substring of a string as the substring(startIdx, endIdx) function, but the second parameter’s meaning is totally different from the substring(startIdx, endIdx) function.
2. The first parameter is the first character’s index in the original string.
3. The second parameter is the totally character number that will return from the startIdx index, it is also the character number of the returned substring.
4. Below is an example, if you misunderstand the second parameter’s meaning of the substr() function, then you may think the code var endIdx = str.indexOf(‘)’, startIdx + 1); do not execute correct.

   var str = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36';
   
   var startIdx = str.indexOf('(');
   
   var endIdx = str.indexOf(')', startIdx + 1);
   
   // Use the substr(startIdx, numberOfCharacters) function will return wrong substring.
   var subString = str.substr(startIdx + 1, endIdx);
   
   console.log(subString)
   
   // If really want to use the substr(startIdx, numberOfCharacters) function, you should use it like below.
   subString = str.substr(startIdx + 1, 27)
   
   console.log(subString);
   
   // Below is the above example source code executing result in the web browser inspector console.
   
   // Below substring is not correct when get it with the substr() function.
   Windows NT 10.0; Win64; x64) AppleWebKit
   
   // Below is the correct substring.
   Windows NT 10.0; Win64; x64

3. slice(startIdx, endIdx).

1. The slice(startIdx, endIdx) is similar to the substring(startIdx, endIdx), the parameters meaning is the same.
2. But the slice(startIdx, endIdx) function can be used not only to get substring but also can be used to get sub-elements from an array. And the slice() function parameter’s value can be a negative integer.
3. Below is the JavaScript slice(startIdx, endIdx) function example.

   var str = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36';
   
   var startIdx = str.indexOf('(');
   
   var endIdx = str.indexOf(')', startIdx + 1);
   
   // Use the slice(startIdx, endIdx) function to get the correct substring.
   var subString = str.slice(startIdx + 1, endIdx);
   
   console.log(subString)
   
   var arr = ['JavaScript', 'Java', 'Python', 'C', 'C++', 'C#'];
   
   var subArr = arr.slice(1, 3);
   
   console.log(subArr);
   
   subArr = arr.slice(-5, -2);
   
   console.log(subArr);
   
   subArr = arr.slice(3, -1);
   
   console.log(subArr);
   
   // Below is the above source code executing output in the web browser inspector console.
   
   Windows NT 10.0; Win64; x64
   (2) ["Java", "Python"]
   0:"Java"
   1:"Python"
   (3) ["Java", "Python", "C"]
   0:"Java"
   1:"Python"
   2:"C"
   (2) ["C", "C++"]
   0:"C"
   1:"C++"