How to Use the substr Method in JavaScript

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

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

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

The example below demonstrates how to use substr() to extract a portion of a string:

const str = "Make a cut!";
console.log(str.substr(7, 3));
// Expected output: cut

In the example above the substr() method is being used to extract a certain part of the str String. The value returned starts at index 7, and proceeds for 3 more characters if they are available.

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

Note: JavaScript strings are immutablesubstr() creates a new string in memory upon completion.


The syntax of the substr() method is as follows:

String.substr(startIndex, length)

startIndex: the index at which to start the extraction.

length (optional): the number of characters to include in the extraction.

Note: the length parameter is optional. When omitted, the substr() method will extract characters from the startIndex to 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 returns the last character in our original test string, which is an exclamation mark.

Special cases for the substr() method

There are a few special cases in the behavior of the substr() method that need additional explanation:

  • When the startIndex is negative, the starting point of the substr() method is found by counting from the end of the String being operated upon:
const str = "Make a cut!";
console.log(str.substr(-6, 1));
// Expected output: a

In the example above, the extraction begins from str’s end (because a negative number is assigned to the startIndex parameter), counting back six characters, then extracting a single character. If the length parameter was omitted, all of the last six characters would be printed to the console.

  • If the length provided is greater than String.length, the substr() method will treat it as String.length.
  • Any argument which includes a decimal point will be rounded down (i.e. 6.72 will be converted to 6).
  • Any value which is not a number (NaN) will be regarded as zero.
const str = "Make a cut!";
console.log(str.substr('start', 4.7));
// Expected output: Make

In the example above, the argument ‘start’ is not a number, therefore, the operation conducted by substr() begins from index zero in the str variable and count the next 4 characters (as 4.7 is rounded down).

  • If no arguments are passed in, and both parameters are omitted, the substr() 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 indexOf method

JavaScript – How to Use the String.prototype replace Method

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