JavaScript substring method through examples

We have covered 2 easy ways to check if JavaScript string contains a substring and JavaScript String replace method, regarding substrings. In this article, we are going to see what is JavaScript substring method and what can we use it for.

What is JavaScript substring method

JavaScript substring() method returns the part of the string between starting and end indexes, or the end, according to MDN.

Similar to other JavaScript that are using indexes, substring() method accepts two parameters.

• starting index – index (Number) from which JavaScript substring starts returning substring
• ending index – index (Number) to which JavaScript substring returns substring

If only one parameter is provided, it is considered as the first parameter, starting index. When the ending index is omitted substring() method will return everything to the end of the string.

There are three ways we can provide indexes.

1. Using Number – we can provide indexes by using Number, integer
2. Using .length property – we can provide indexes by using .length property
3. Combination – we can provide indexes by combining the first two methods.

Substring method with numbers

The first way of using the substring() method is by providing indexes as pure integers.

let str = "This is a string";

// Return everything between indexes 5 and 10
console.log(str.substring(5, 10));
/* This will return everything between
 * 6th and 11th character in the string
 */
 
 // Result:
 // is a 
 
 // Return everything from index 3 to the end
 console.log(str.substring(3));
 /**
  * This will return everything from the 4th
  * charater to the end
  * */
  
  // Result:
  // s is a string

As we said before when we provide both indexes substring() method returns everything between those two indexes. We just have to remember that, in JavaScript, indexes are zero-based. They start from zero, instead of one. So, when we say index 2 it will start from the third character.

If we omit the second index, substring() method will return everything till the end. Like in our second example, in the snippet above.

Substring method with the length property

We can provide an index to the JavaScript substring method by using the length property.

let str = "This is a string";

// Return last 6 characters
console.log(str.substring(str.length - 6));
/* This will return last 6 characters
 * of the string
 */
 
 // Result:
 // string
 

The .length property returns the number of the characters in the string. So, when we use it in the substring() method, we usually subtract some numbers from it. This number represents how many characters from the back of the string we want to copy. If we use it as a single index, as we did in our example above, e.g. length - 5 will return the last 5 characters.

Substring method – combining numbers and length

The third way of providing indexes to the substring() is by combining numbers and the length property.

let str = "This is a string";

// Return everything from index 4 up to last 6 characters
console.log(str.substring(4, str.length - 6));
/* This will return everything from the 5th
 * character up until the last 6 characters
 * of the string
 */
 
 // Result:
 // is a
 

We have to remember that when using the .length property instead of indexes it counts real characters from the end of the string.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like JavaScript String replace method.