Definition and Usage

The substring() function extracts a portion of a string.
It returns a new string from the specified start index up to, but not including, the end index.

String indices start at 0.

Features

  • The original string remains unchanged.
  • When the start index is greater than the end index, the function behaves as if the two values were swapped.

Note:
The end index is not included. The extraction stops just before it.

Basic Example

JavaScript 
const str = "codingCourses";

console.log(str.substring(0, 6)); // Output: "coding"
console.log(str.substring(6, 12)); // Output: "Course"
console.log(str.substring(6)); // Output: "Courses"

/* If the start index is greater than the end index,
   the function behaves as if the two indices were swapped. */
console.log(str.substring(12, 6)); // Output: "Course"

/* 👇 The original string remains unchanged. */
console.log(str); // Output: "codingCourses"

Syntax

JavaScript 
str.substring(indexStart);
str.substring(indexStart, indexEnd)

str: The original string to which the substring() function is applied.

Parameters

Parameters of the substring() function
indexStart An integer representing the index at which to start extraction. The character at this index is included in the extracted substring.
indexEnd Optional. An integer representing the index immediately after the last character to extract. Characters up to, but not including, this index are returned. If omitted, the function extracts characters to the end of the string.

Return Value

Returns a new string containing the extracted characters, starting from the specified index up to, but not including, the end index. The original string remains unchanged.

Parameter and Return Value Examples

When the Start Index Is Greater Than the End Index

If the provided start index (indexStart) is greater than the end index (indexEnd), the function behaves as if the two indices were swapped.

JavaScript 
const str = "codingCourses";

console.log(str.substring(6, 0)); // Output: "coding"
// Equivalent to str.substring(0, 6)
When the End Index Is Omitted

If the end index (indexEnd) is omitted, the function extracts the substring through to the end of the string.

JavaScript 
const str = "codingCourses";

console.log(str.substring(3)); // Output: "ingCourses"
When the Start Index and End Index Are the Same

If the provided start index (indexStart) is the same as the end index (indexEnd), the function returns an empty string ("").

JavaScript 
const str = "codingCourses";
const result = str.substring(3, 3);

console.log(result);        // Output: ""
console.log(typeof result); // Output: "string"
console.log(result.length); // Output: 0

Code Explanation
The typeof operator returns the data type of its operand as a string.

Code Explanation
The length property of a string returns the number of characters it contains as a numeric value.

When an Argument Is Less Than 0

If an argument is less than 0, it is treated as 0.

JavaScript 
const str = "codingCourses";

console.log(str.substring(-1, 3)); // Output: "cod"
console.log(str.substring(4, -3)); // Output: "codi"
When an Argument Is Greater Than the Length of the Original String

If an argument is greater than the length of the original string, it is treated as the length of the string.

JavaScript 
const str = "codingCourses";

console.log(str.substring(0, 50));           // Output: "codingCourses"
console.log(str.substring(0, str.length));   // Output: "codingCourses"
When an Argument Is NaN

If an argument is NaN, it is treated as 0.

JavaScript 
const str = "codingCourses";
const indexStart = "coding" * 2;

console.log(indexStart);                   // Output: NaN
console.log(str.substring(indexStart, 3)); // Output: "cod"

Differences Between substring() and slice()

The substring() and slice() functions behave almost identically, but there are subtle differences in how they handle their arguments.

Additional Explanation
The slice() function extracts a specific range of characters from a string and returns it as a new string.
It extracts characters starting from the specified start index up to, but not including, the end index.

Below is a table comparing the differences between the substring() and slice() functions.

Comparison of substring() and slice() Functions
Feature substring() slice()
Negative Index Support Negative values are treated as 0. Negative values count backward from the end of the string.
Start Index > End Index Automatically swaps the two indices. Does not swap; returns an empty string ("").
JavaScript 
const str = "JavaScript";

// substring(): Swaps 4 and 1, effectively becoming substring(1, 4)
console.log(str.substring(4, 1)); // Output: "ava"

// slice(): Does not swap indices; returns an empty string
console.log(str.slice(4, 1));     // Output: ""

Practical Examples

The substring() function is useful for extracting specific segments of a string. Here are several practical scenarios where you can apply this function.

Formatting a Phone Number

This is useful for formatting raw input or masking parts of a phone number for better readability.

JavaScript 
const formatPhoneNumber = phoneNumber => {
    // Formats a 10-digit string into (XXX) XXX-XXXX
    return "(" + phoneNumber.substring(0, 3) + ") " +
           phoneNumber.substring(3, 6) + "-" +
           phoneNumber.substring(6);
}

console.log(formatPhoneNumber("1234567890")); // Output: "(123) 456-7890"

Reformatting a Date

You can extract specific parts of a date string to reorganize them into a different format.

JavaScript 
const formatDate = dateString => {
    const month = dateString.substring(0, 2);
    const day   = dateString.substring(3, 5);
    const year  = dateString.substring(6, 10);
    
    return `${month}/${day}/${year}`;
}

console.log(formatDate("02-27-2024")); // Output: "02/27/2024"

Emphasizing Part of a Text

You can programmatically wrap a specific part of a string with HTML tags for emphasis.

JavaScript 
const emphasizeText = (text, startIndex, endIndex) => {
    return text.substring(0, startIndex) +
           "<strong>" + text.substring(startIndex, endIndex) +
           "</strong>" + text.substring(endIndex);
}

const originalText = "JavaScript is powerful!";
console.log(emphasizeText(originalText, 0, 10)); // Output: "<strong>JavaScript</strong> is powerful!"

Compatibility

Compatibility for JavaScript substring() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
Node.js
Node.js
substring() 1 12 1 1 0.10

Specifications

Specification for JavaScript substring() Function
Specification
substring() ECMAScript® 2026 Language Specification
#sec-string.prototype.substring

References

See also