JavaScript Substring Methods: `substr` vs `substring`

When working with strings in JavaScript, you often need to extract parts of a string. Two commonly used methods for this purpose are substr and substring. While both methods achieve similar results, they have some important differences that you should be aware of. In this article, we’ll explore these differences and provide examples to help you understand when to use each method.

What are Substring Methods?

Substring methods are functions that allow you to extract a portion of a string based on the positions of characters. The two main methods we’ll discuss are:

substr: This method extracts a substring from a string, starting at a specified index and extending for a specified number of characters.
substring: This method extracts a substring from a string, starting at a specified index and ending at a specified index.

The `substr` Method

The substr method is used to extract a substring from a string. It takes two parameters:

startIndex: The index of the character to start extraction from.
length: The number of characters to extract.

Syntax

string.substr(startIndex, length);

Example

let str = "Hello, World!";
let result = str.substr(7, 5);
console.log(result); // Outputs: "World"

In this example, startIndex is 7 (the position of ‘W’), and length is 5. The method extracts 5 characters starting from index 7, resulting in “World”.

The `substring` Method

The substring method is used to extract a substring from a string. It takes two parameters:

startIndex: The index of the character to start extraction from.
endIndex: The index of the character to stop extraction before.

Syntax

string.substring(startIndex, endIndex);

Example

let str = "Hello, World!";
let result = str.substring(7, 12);
console.log(result); // Outputs: "World"

In this example, startIndex is 7 (the position of ‘W’), and endIndex is 12 (the position after ‘d’). The method extracts characters from index 7 up to, but not including, index 12, resulting in “World”.

Key Differences Between `substr` and `substring`

Parameters:
substr takes startIndex and length.
substring takes startIndex and endIndex.
Behavior with Negative Indices:
substr allows negative startIndex. If startIndex is negative, it is treated as an offset from the end of the string.
substring ignores negative indices and treats them as 0.
Handling of startIndex and endIndex:
If startIndex is greater than endIndex, substring swaps them automatically.
substr does not swap indices. If startIndex is greater than endIndex, it returns an empty string.

Example of Negative Indices

let str = "Hello, World!";

// Using substr with negative startIndex
let result1 = str.substr(-5, 5);
console.log(result1); // Outputs: "World"

// Using substring with negative startIndex
let result2 = str.substring(-5, -1);
console.log(result2); // Outputs: "World"

When to Use Each Method

Use substr when you know the starting index and the number of characters you want to extract.
Use substring when you know the starting and ending indices.

Deprecated Status of `substr`

It’s important to note that the substr method is deprecated in modern JavaScript. While it still works in most browsers, it’s recommended to use substring or the newer slice method for better compatibility and clarity.

Frequently Asked Questions

Q1: Why is `substr` deprecated?

A: The substr method is deprecated because it can lead to confusion due to its parameter handling, especially with negative indices. The substring method is considered more straightforward and less error-prone.

Q2: Can I use `substr` in modern JavaScript?

A: While substr still works, it’s recommended to avoid using it in new code. Instead, use substring or slice for better compatibility and readability.

Q3: How does `slice` differ from `substr` and `substring`?

A: The slice method is similar to substring but also allows negative indices. It’s more flexible and widely recommended for modern JavaScript development.

Conclusion

Understanding the differences between substr and substring is essential for working with strings in JavaScript. While substr is deprecated, it’s still useful to know for maintaining legacy code. For new projects, consider using substring or slice for better compatibility and clarity. With practice, you’ll become comfortable using these methods to extract substrings from strings in various scenarios.