JavaScript String Extraction Methods: In-depth Analysis of substr vs substring

Core Concepts and Parameter Semantic Differences

In JavaScript string manipulation, both substr and substring are commonly used extraction methods, but they differ fundamentally in parameter semantics. The second parameter of substr represents the number of characters to extract, while the second parameter of substring indicates the ending index (excluding the character at that index). This distinction directly influences method behavior and appropriate use cases.

Detailed Parameter Handling Mechanisms

When using substr(start, length), the method extracts a substring of specified length starting from the start index. If the length parameter is omitted, extraction continues to the end of the string. In contrast, substring(start, end) extracts from the start index up to, but not including, the end index. If end is omitted, extraction similarly proceeds to the string's end.

Practical Code Example Comparisons

Considering the string "Mozilla", we can demonstrate their differences through concrete examples:

const str = "Mozilla";

// substr examples
console.log(str.substr(2, 3));  // Outputs "zil"
console.log(str.substr(1));     // Outputs "ozilla"

// substring examples  
console.log(str.substring(2, 5)); // Outputs "zil"
console.log(str.substring(1));    // Outputs "ozilla"

Superficially, both methods may produce identical results in some cases, but the differing parameter semantics lead to significant variations in specific scenarios. For instance:

const text = "abcdef";

console.log(text.substr(1, 3));    // Outputs "bcd" (3 characters starting from index 1)
console.log(text.substring(1, 4)); // Outputs "bcd" (from index 1 to index 4, excluding index 4)

Edge Case Handling

The two methods also exhibit different behaviors when handling edge cases. The substring method automatically manages parameter order; if start is greater than end, it swaps the two parameters:

const str = "JavaScript";

console.log(str.substring(5, 2)); // Outputs "vaS" (automatically swapped to substring(2, 5))
console.log(str.substr(5, 2));    // Outputs "Sc" (2 characters starting from index 5)

Modern JavaScript Development Recommendations

According to ECMAScript specifications, substr is marked as a legacy feature. In modern JavaScript development, it is advisable to prioritize substring or slice methods. The slice method shares similar parameter semantics with substring but handles negative indices differently, offering more flexible string manipulation capabilities.

const str = "Programming";

// Using substring
console.log(str.substring(3, 7)); // Outputs "gram"

// Using slice (supports negative indices)
console.log(str.slice(3, 7));     // Outputs "gram"
console.log(str.slice(-4));       // Outputs "ming" (counting from the end)

Performance and Compatibility Considerations

Although substr remains available in most modern browsers, its legacy status warrants avoidance in new projects. Conversely, substring offers better specification support and clearer parameter semantics, enhancing code readability and maintainability.

Summary and Best Practices

Understanding the core differences between substr and substring is crucial for writing robust JavaScript code. When selecting a string extraction method, developers should consider: clarity of parameter semantics, modern method support, and specific scenario requirements. For most use cases, substring provides a more intuitive and reliable solution.