The Difference Between String.slice and String.substring in JavaScript

1. What Is String and prototype in JavaScript
2. What Is slice and substring in JavaScript
3. What Are the Similarities Between slice and substring in JavaScript
4. What Are the Differences Between slice and substring in JavaScript

In this tutorial article, we will discuss what is slice and substring in JavaScript and what differentiates them and what does not; the following questions will be addressed in this article:

• What is String and Prototype
• What is slice and substring
• What are the similarities between slice and substring
• What are the differences between slice and substring

What Is String and prototype in JavaScript

Let’s start by discussing the String object. The string object is used to represent a sequence of characters, and it is commonly used with data that needs to be represented as text.

JavaScript treats primitive values as objects by wrapping them in a special object wrapper that provides extra functionality such as helper methods and properties. Each primitive type has its object wrapper; the string type is called String.

Let’s focus our attention on prototype, a prototype is a global property with all JavaScript objects. It allows adding new methods and properties to existing objects.

function footballClub(name, stadium, founded) {
  this.name = name;
  this.stadium = stadium;
  this.founded = founded;
}
footballClub.prototype.firstTeamPlayers = 11;

const FCB = new footballClub('FC Barcelona', 'Camp Nou', 1899);
console.log(FCB.firstTeamPlayers);
// logs 11

Output:

11

In the example above, each footballClub instance will have the firstTeamPlayers property set to 11. Similarly, the prototype property allows you to add new properties and methods to strings.

What Is slice and substring in JavaScript

slice and substring are prototype properties that exist on all JavaScript Strings in the form of functions. slice and substring function extracts a part of a string and returns it as a new string. The slice method does not change the original string.

It takes two arguments, the first argument specifies the starting index to start the extraction from (the index starts at 0), and the second argument specifies the ending index of the string (the ending index is not included as part of the extraction)

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(3, 8);
let substringStr = str.substring(3, 8);
console.log(slicedStr)     // logs: na be
console.log(substringStr)  // logs: na be

Output:

na be
na be

What Are the Similarities Between slice and substring in JavaScript

If start equals stop both slice and substring returns an empty string.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(8, 8);
let substringStr = str.substring(9, 8);
console.log(slicedStr)     // logs:
console.log(substringStr)  // logs:

Output:

If stop(second argument) is not including both slice and substring extracts characters till the end of the string.

let str = "Gonna be extracted,Help!"; 
let slicedStr = str.slice(3);
let substringStr = str.substring(3);
console.log(slicedStr) // logs: na be extracted,Help!
console.log(substringStr) // logs: na be extracted,Help!

Output:

na be extracted,Help!
na be extracted,Help!

If either the start or stop argument is greater than the length of the string, the string’s length will be used instead of the passed argument.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(1, 100);
let substringStr = str.substring(1, 100);
console.log(slicedStr)     // logs: onna be extracted,Help!
console.log(substringStr)  // logs: onna be extracted,Help!

Output:

onna be extracted,Help!
onna be extracted,Help!

What Are the Differences Between slice and substring in JavaScript

If the start argument is greater than the stop argument in slice, it will return an empty string, whereas substring will swap those two arguments if that is the case.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(8, 3);
let substringStr = str.substring(8, 3);
console.log(slicedStr)     // logs:
console.log(substringStr)  // logs: na be

Output:

na be

If start argument or stop argument is negative or is NaN, it is treated as if its value were 0 in substring whereas in slice if start argument is negative, it sets character from the end of the string.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(-1);
let substringStr = str.substring(-1);
console.log(slicedStr)     // logs: !
console.log(substringStr)  // logs: Gonna be extracted,Help!

Output:

!
Gonna be extracted,Help!

You can also get more professional JavaScript development services from a JavaScript development company that has served the web development industry since 2005.