What is the Difference Between Slice and Substring in Javascript

Javascript is a popular programming language that is commonly used for web development. When it comes to manipulating strings, two commonly used methods are slice() and substring(). In this tutorial, we will explore the differences between these two methods and when to use each one.

Slice() method

The slice() method is a built-in function in JavaScript that extracts a section of a string and returns it as a new string without modifying the original string. The slice() method takes two arguments: the start index and the end index of the section to be extracted. The end index is optional, and if it is not specified, the slice will continue to the end of the string.

Example:

const str = "Hello, World!";
const slicedStr = str.slice(0, 5);
console.log(slicedStr); // Output: "Hello"

In this example, slice(0,5) will extract the first 5 characters of the string and return them as a new string.

Substring() method

The substring() method is also a built-in function in JavaScript that extracts a section of a string and returns it as a new string without modifying the original string. The substring() method takes two arguments: the start index and the end index of the section to be extracted. The end index is also optional, and if it is not specified, the substring will continue to the end of the string.

Example:

const str = "Hello, World!";
const subStr = str.substring(0, 5);
console.log(subStr); // Output: "Hello"

In this example, substring(0,5) will extract the first 5 characters of the string and return them as a new string.

Differences Between slice() and substring()

The main difference between slice() and substring() is how they handle negative index values.

The slice() method can accept negative index values, which are treated as offsets from the end of the string. For example, slice(-3) will return the last three characters of the string.

Example:

const str = "Hello, World!";
const slicedStr = str.slice(-6);
console.log(slicedStr); // Output: "World!"

The substring() method, on the other hand, does not accept negative index values. If a negative index value is provided, it will be treated as 0.

Example:

const str = "Hello, World!";
const subStr = str.substring(-6); 
console.log(subStr); // Output: "Hello, World!"

Another difference is how the two methods handle the second argument. If the second argument is greater than the first argument, slice() and substring() will return the same result. However, if the second argument is less than the first argument, slice() will return an empty string, while substring() will swap the arguments and return the substring.

Example:

const str = "Hello, World!";
const slicedStr = str.slice(7, 5);
console.log(slicedStr); // Output: ""
const subStr = str.substring(7, 5);
console.log(subStr); // Output: " Wor"

You May Also Like:

What is the Difference Between Slice and Splice in Javascript What is Difference Between Callbacks, Promises and Async/Await in Javascript What is the Difference Between Map and Filter in Javascript What is the Difference Between Find and Filter in Javascript How to Check if a String Contains Another Substring in Javascript