JavaScript substring() Method

Introduction

The substring() method in JavaScript is used to extract a portion of a string between two specified positions. It is one of the most commonly used string methods and is useful when working with text processing, form validation, user input, URLs, file names, and many real-world applications.

What is the JavaScript substring() Method?

The JavaScript substring() method extracts characters from a string between two indexes and returns them as a new string.

Syntax of substring()

string.substring(startIndex, endIndex)

Explanations:

• startIndex: Starting position
• endIndex: Ending position (excluded)

Basic Examples of substring()

You will see some Basic examples of the substring() methods.

Example 1: Extract Beginning Characters

let text = "JavaScript";
console.log(text.substring(0,4));

Output:

Example 2: Extract Middle Characters

let text = "JavaScript";
console.log(text.substring(4,10));

Output:

Example 3: Extract Until End

let text = "Programming";
console.log(text.substring(3));

Output:

substring() with Same Index

If both indexes are same:

let text = "Hello";
console.log(text.substring(2, 2));

Output: It will be empty

substring() with Negative Values

Negative indexes become zero (0).

let text = "JavaScript";
console.log(text.substring(-2, 4));

Output:

Real-Life Example 1: Product Description Preview

let description  = "Powerful Performance Segment Best smartphone";

let preview = description.substring(0,20);

console.log(preview + "...");

Output:

Real-Life Example 2: Show Username Preview

Suppose you have a username john_taylor_123

let username = "john_taylor_123";
console.log(username.substring(0,5) +"...");

Output:

Real-Life Example 3: Display Last Digits of Number

Suppose you have a mobile number 9876543210 and you want to display the last 4 digits of the number.

Example:

let mobile = "9876543210";
console.log(mobile.substring(6));

Output:

substring() vs slice()

Beginners often confuse these methods.

Common Mistakes in substring()

You will see some common mistakes in the substring() method

Mistake 1: Expecting Negative Index Support

Wrong:

let name = "John";
console.log(name.substring(-2));

Expected:

hn

Output:

Note: Negative becomes 0.

Mistake 2: Confusing slice() with substring()

substring(): Indexes swapped automatically.

let language = "Java";
let result = language.substring(4,0);
console.log(result);

Output:

slice():

let language = "Java";
let result = language.slice(4,0);
console.log(result);

Output: “”

Mistake 3: Assuming Original String Changes

Wrong expectation:

let text="Hello";
text.substring(0,2);
console.log(text);

Output:

Note: Original string unchanged.

Conclusion

The JavaScript substring() method is useful for extracting specific portions of strings without modifying the original value. It is commonly used in form validation, preview text, usernames, URLs, and data processing.

Unlike slice(), the substring() method does not support negative indexes and automatically swaps indexes when the starting position is greater than the ending position.

Related JavaScript Tutorials