How to Use the substring Method in JS

  • 3 min read
  • December 6, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

The substring() method extracts a part of a string from the larger whole.

Note: Be careful to not confuse substring() with the substr() method!

The example below demonstrates how to use the substring() method to retrieve a portion of a string:

const str = "Can I have a piece?";
console.log(str.substring(11, 18));
// Expected output: a piece

In the example above, the substring() method is used to extract the portions of the string str between index 11 (which is included in the result) and index 18 (which is not included).

The substring() method returns a new string as its result.

Note: JavaScript strings are immutable, meaning that a new string is created in memory for the return value of substring().


The syntax of substring() is as follows:

String.substring(startIndex, endIndex)

startIndex: the index at which to start the extraction.

endIndex (optional): the index at which the extraction should end. Note: this character will not be included in the returned string.

The endIndex parameter is optional. When omitted, the substring() method will extract all characters from the string beginning at startIndex until the end of the String it operates upon.

Note: A String’s index begins at zero.

String.length is equal to the index of the last character in the string + 1. This means that in order to retrieve the last character in a string, you need to use str.length – 1 to get the last index:

console.log(str[str.length - 1]);
// Expected output: ?

The example above demonstrates how to use str.length – 1 to retrieve the final character from a given string. In our example, the final character is a question mark.

Special cases for the substring() method

  • When the startIndex and endIndex are the same value, the substring method returns an empty string.
  • If the value of endIndex is less than that of startIndex, the method will swap the two parameters. This is demonstrated in the example below:
// str.substring(11, 18) IS EQUAL TO str.substring(18, 11)
const str = "Can I have a piece?";
console.log(str.substring(18, 11));
// Expected output: a piece
  • If an argument value is less than zero, or greater than String.length, the substring() method regards it as zero or String.length respectively.
  • Any argument which includes a decimal point will be round down (i.e. 5.84 will be rounded down to 5).
  • Any value which is not a number (NaN) is regarded as zero, as seen in the example below:
const str = "Can I have a piece?";
console.log(str.substring('start', 3));
// Expected output: Can

In the example above, the argument ‘start’ is not a number. Therefore, the resulting String begins from str’s index zero.

  • If no arguments are passed in and both parameters are omitted, the substring() method returns a copy of the String it operates upon.


Similar methods


Related Articles

JavaScript – How to Use the toString method

JavaScript – How to Use the includes() Method

JavaScript – How to Use split

Related Posts

How to Change CSS Using JavaScript

How to Change CSS Using JavaScript

Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in

How to Use the Assignment Operator in JavaScript

How to Use the Assignment Operator in JavaScript

The Assignment operator is used to assign a value to a variable. Assignment (=) The assignment operator simply assigns the value of the right operand to

How to Use the for…in Statement in JavaScript

How to Use the for…in Statement in JavaScript

The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement