What it is for

Data type for texts, phrases, and individual letters is called string in most programming languages. There are a number of standard methods for such data in JavaScript, bundled in the String object. They allow you to perform basic operations with string variable content using simple commands. This eliminates the need to create own algorithms for operations such as finding out a string length, rearranging or searching for individual letters etc.

To obtain a specific part of a string, there also is a special method called substring. Substring returns a specific part of a string variable, selected according to the string characters indices, which are called arguments. At the same time the text of the original string remains unchanged. 

It significantly speeds up interaction with the content of the string and allows you to compile more concise code. For example, to extract a certain part of the string manually, you'd have to get its entire contents and remove (in some cases) those parts of it that come before and after the desired fragment. Depending on your skill level, you will need to write at least a few lines of code. But with substring() you can get the required fragment with just one line of the code.

Syntax

First, in order to apply this method, you need to create the string variable with some content. Then, in parentheses, you need to specify the indices of the first and last characters of the fragment which you need.

substring(index1, index2);

After execution, this method will return a text fragment with all data between first and second indices. But this will not include the character directly corresponding to the second index. For example, in the following code, we will print the first two characters of a text to the console:

const Mytext = "ABCDEFG";
console.log(Mytext.substring(0, 2)); // Output: AB

Also substring can be used to get the last characters of a string, without specifying the index of the first one. In such cases, reading will start in the opposite direction from the last character. To do this, you need to set the length of the string as an argument and subtract the required number of characters from it:

const myText = "ABCDEFG";
const substringText = myText.substring(myText.length - 3);
console.log(substringText); // Output: EFG

Special cases

Indices (characters) don't have value restrictions, so here is how substring() handles queries with non-standard indices in arguments:

  • If the second index is not specified

Then it will return a string from the first index to the end of the string. The string length value for the second index will be calculated automatically.

const myText = "ABCDEFG";
const substrText = myText.substring(0);
console.log(substrText); // Output: ABCDEFG

  • If the first and second indices are equal

In this case, an empty string will be returned.

const myText = "ABCDEFG";
const emptySubstr = myText.substring(1, 1);
console.log(emptySubstr); // Output: ""

  • If the index is greater than the length of the string

The index will be automatically corrected to the maximum possible number - the length of the string. This rule applies equally to both indices.

const myText = "ABCDEFG";
const substrWithGreatIndex = myText.substring(1, 10);
console.log(substrWithGreatIndex); // Output: ABCDEFG

  • If the index is less or equal to 0 or its value is not a number (NaN)

In such cases the index value will be considered 0.

const myText = "ABCDEFG";
const negativeIndex = myText.substring(-2, 4);
console.log(negativeIndex); // Output: ABCD

  • If the second index is greater than the first one

In this case, the substring will be executed with the values swapped.

const myText = "ABCDEFG";
const substrInd = myText.substring(5, 3);
console.log(substrInd); // Output: DE

Difference between substring, substr and slice

substring and substr differ primarily due to the fact that substr uses a second index as the length of the requested fragment. In addition, substr is deprecated, so it is now mainly used to support legacy systems.

The difference between substring and slice is in the handling of non-standard indices. In particular, a slice with a second negative index will start reading from the end of the string,  while substring will make this index equal to zero before execution. Also, slice can't process requests where the second index is greater than the first, while substring automatically swaps them.

Test yourself

  • Task 1. Print all possible words from the word "Wholesale" to the console using the substring method.

const myString = "Wholesale";
const wholesaleString = myString.substring(0, 9);
const wholeString = myString.substring(0, 5);
const holeString = myString.substring(1, 5);
const saleString = myString.substring(5, 9);
const whoString = myString.substring(0, 3);
                  
console.log(wholesaleString); // Output: Wholesale
console.log(wholeString); // Output: Whole
console.log(holeString); // Output: hole
console.log(saleString); // Output: sale
console.log(whoString); // Output: Who

  • Task 2. Extract the last word from a phrase, using the text length value.

const myString = "Holidays - time for discounts";
const lastWord = myString.substring(myString.length - 9);
console.log(lastWord); // Output: discounts