Difference Between String Slice and Substring Methods

JavaScript provides several built-in methods for string manipulation. Two commonly used methods are slice() and substring(), which extract portions of strings. While they appear similar, they handle edge cases differently, particularly with negative indices.

String slice() Method

The slice() method extracts a section of a string and returns it as a new string without modifying the original string.

Syntax

string.slice(start, end)

Parameters

• start: The index where extraction begins (inclusive)
• end (optional): The index where extraction ends (exclusive)

String substring() Method

The substring() method returns a portion of the string between the start and end indexes, or to the end of the string.

Syntax

string.substring(start, end)

Parameters

• start: The index where extraction begins (inclusive)
• end (optional): The index where extraction ends (exclusive)

Key Differences with Examples

Let's examine the differences using the string 'Good Morning' (length: 12):

const greeting = 'Good Morning';
console.log(`String: "${greeting}", Length: ${greeting.length}`);

String: "Good Morning", Length: 12

Positive Start Index

Both methods work identically with positive indices:

const greeting = 'Good Morning';

console.log('slice(5):', greeting.slice(5));
console.log('substring(5):', greeting.substring(5));

slice(5): Morning
substring(5): Morning

Negative Start Index

Here's where the methods differ significantly:

const greeting = 'Good Morning';

console.log('slice(-7):', greeting.slice(-7));
console.log('substring(-7):', greeting.substring(-7));

slice(-7): Morning
substring(-7): Good Morning

slice() treats negative indices as counting from the end, while substring() treats negative values as 0.

Start Index Greater Than End Index

const greeting = 'Good Morning';

console.log('slice(9, 5):', greeting.slice(9, 5));
console.log('substring(9, 5):', greeting.substring(9, 5));

slice(9, 5): 
substring(9, 5): Morn

slice() returns an empty string when start > end, while substring() swaps the parameters.

Both Parameters Negative

const greeting = 'Good Morning';

console.log('slice(-12, -8):', greeting.slice(-12, -8));
console.log('substring(-12, -8):', greeting.substring(-12, -8));

slice(-12, -8): Good
substring(-12, -8): 

Mixed Positive and Negative Indices

const greeting = 'Good Morning';

console.log('slice(5, -3):', greeting.slice(5, -3));
console.log('substring(5, -3):', greeting.substring(5, -3));

slice(5, -3): Morn
substring(5, -3): Good

Comparison Table

When to Use Which Method

• Use slice() when you need negative indexing or want predictable behavior with invalid ranges
• Use substring() when you want automatic parameter correction for invalid ranges

Conclusion

While both methods extract string portions, slice() offers more intuitive behavior with negative indices and maintains consistent logic. substring() provides automatic error correction by swapping invalid parameters, making it more forgiving but less predictable.