What is the Difference between JavaScript SubString vs Slice

Do you want to know the difference between the JavaScript string Substring vs Slice methods? Read on!

In this article, you will understand the distinction between the substring and slice methods in JavaScript.

Let’s dive in to start enhancing your JavaScript skills.

What is a Substring Method?

The substring() method in JavaScript extracts characters from a string, between two specified indices, and returns the new sub string.

This method extracts characters from start to end (end exclusive). If the start is greater than the end, the arguments are swapped.

The substring() method does not change the original string. If start or end values are less than 0, they are treated as 0.

Syntax

string.substring(indexStart[, indexEnd]) ✅

Parameters

indexStart (Required)

The index of the first character to include in the returned substring.

indexEnd (Optional)

The index of the first character to exclude from the returned substring.

Return value

A new string containing the specified part of the given string.

Here’s an example:

let sampleString = "Hi, welcome to Itsourcecode!";
let result = sampleString.substring(15,28 ); ✅
console.log(result)

Output:

let sampleString = "Hi, welcome to Itsourcecode!";
let result = sampleString.substring(15,28 );
console.log(result)

What is the Slice Method?

The slice() method in JavaScript returns a new string with a subset of the characters of the original string.

It takes two arguments: the beginning index (inclusive) and the end index (exclusive).

If you omit the second argument, slice() extracts characters to the end of the string. If the start is greater than the end, slice() does not swap arguments.

Syntax

string.slice(beginIndex[, endIndex]) ✅

Parameters

beginIndex (Required)

The zero-based index at which to begin extraction. If negative, it is treated as strLength + beginIndex where strLength is the length of the string.

endIndex (Optional)

The zero-based index before which to end extraction. The character at this index will not be included. If endIndex is omitted, slice extracts to the end of the string. If negative, it is treated as strLength + endIndex.

Return value

A new string containing the extracted section of the given string.

Here’s an example:

let sampleString = "Hi, welcome to Itsourcecode!";
let result = sampleString.slice(4,28 ); ✅
console.log(result) 

Output:

welcome to Itsourcecode!

What is the Difference between JavaScript SubString vs Slice Method

The substring() and slice() methods in JavaScript are both used to extract parts of a string, but they behave differently in certain scenarios:

Negative Indices

Substring() does not accept negative indices. If a negative or NaN is passed, it is treated as if 0 were passed.

On the other hand, slice() accepts negative indices, which count back from the end of the string.

Index Swapping

If the indexStart is greater than indexEnd, substring() will swap the two arguments. In contrast, slice() will not swap the arguments and will return an empty string if beginIndex is greater than endIndex.

Here’s an illustration that shows the difference between the JavaScript SubString vs. Slice method:

let SampleString = "Hi, Welcome to Itsourcecode!";

console.log(SampleString.substring(7, 5)); // Outputs: ", W"
console.log(SampleString.slice(7, 5)); // Outputs: ""

console.log(SampleString.substring(-3)); // Outputs: "Hi, Welcome to Itsourcecode!"
console.log(SampleString.slice(-3)); // Outputs: "de!"

As you can see, both methods are used to extract parts of a string, they handle arguments differently. Therefore, choosing between substring() and slice() depends on the specific requirements of your code.

📌Please note that both methods do not modify the original string but return a new string.

However, they handle indices differently. For instance, negative indices in slice() represent offsets from the end of the string, while substring() treats negative indices as 0.

Conclusion

In conclusion, both the substring() and slice() methods in JavaScript are used to extract parts of a string, but they handle arguments differently.

The substring() method does not accept negative indices and will swap the start and end arguments if the start is greater than the end.

On the other hand, the slice() method accepts negative indices, which count back from the end of the string and does not swap arguments if the start is greater than the end.

Choosing between JavaScript substring() and slice() depends on your specific requirements.

If you need to handle negative indices or do not want your arguments to be swapped when the start is greater than the end, then slice() would be the better choice. Otherwise, you can use substring().

We hope this article has provided you with enough information to understand the JavaScript substring vs slice.

If you want to explore more JavaScript topics, check out the following articles:

• Today’s date in mm/dd/yyyy format in JavaScript
• JavaScript Math average
• Dragula JavaScript

Thank you for reading Itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →