JavaScript Comparison Between String.slice() Vs String.substr()
app development

JavaScript Comparison Between String.slice() Vs String.substr() Vs String.substring()

Slice, Substr, and Substring in JavaScript are differs in various aspects

https://dk2dyle8k4h9a.cloudfront.net/JavaScript Comparison Between String.slice() Vs String.substr() Vs String.substring()

With this article on JavaScript, we will be clearing out your confusion in using String.slice() vs String.substr() vs String.substring() together or separately.  But first, we will start by explaining the key differences in the JavaScript strings i.e. substr and substring.

JavaScript basically has two string methods that are:

  1. Substr
  2. Substring

The confusion mainly arises in these two JavaScript strings because they look very identical in the first glance, as both of these string methods also return a substring from a given string.

So, what separates these similar two string methods…

What tells apart these JavaScript string methods are their 'Second Parameters' because both of the numbers are expecting two different outcomes.

For example:

If we are using a 'substr' the second parameter is the number of the characters to include in the substring. Like -

var s = "string";

s.substr(1, 3); // would return 'tri'

 

var s = "another example";

s.substr(3, 7); // would return 'ther ex'

But when we are using a 'substring', then the second parameter is the first index that is not to include. Like -

var s = "string";

s.substring(1, 3); // would return 'tr'

 

var s = "another example";

s.substring(3, 7); // would return 'ther'

String.slice() vs String.substr() vs String.substring()

The methods slice(), substring(), and substr() are the methods that extract parts of a string and then return the extracted parts in a new string. Also, all of these methods do not change the original string from which they extract.

For the slice method i.e. slice(), it can take these two arguments:

Argument #1 - With 'begin' the position of where to begin the extraction is required. The position of the first character starts at 0 and it can use the negative values to specify the exact location from the end of the string.

Argument #2 - For 'end', the position where to end the extraction is optional to mention. Once omitted, the slice() will then select all the characters from the 'start' position to the end of the string and can also use the negative numbers to select from the end of the main string.

Example:

var numbers="0123456789";

console.log(numbers.slice(2,4));   // shows 23

console.log(numbers.slice(-7,-3)); // shows 3456

For the substring method i.e. substring(), it can take these two arguments:

Argument #1 - Starting with 'from' it is required to mention where to extraction from and the first character's index will be set as 0.

Argument #2 - Beginning with 'to', it is optional to mention where the end of extraction will be. Once omitted, it will extract all the rest of the string itself.

Example:

console.log(numbers.substring(-3,5));  // shows 01234

console.log(numbers.substring(NaN,5)); // shows 01234

console.log(numbers.substring(-3));    // shows 0123456789

For the substr method i.e. substr(), it can take these two arguments:

Argument #1 - With the 'start' the extraction will begin and the first character will begin at an index of 0. For extracting the characters from the end of the string, the negative start numbers will be used.

Argument #2 - For the 'length', the mentioning of the number of characters to extract is optional. And if is it omitted, the rest of the string will be extracted automatically.

Example:

console.log(numbers.substr(3)); // shows 3456789

console.log(numbers.substr(-3));// shows 789

Main difference between String.slice() and String.substring()

If the startIndex > endIndex (startIndex greater than endIndex) then the slice() will run an empty string but substring() will swap those parameters. And if startIndex < endIndex (endIndex greater than startIndex) then slice() will consider it as string.length-index whereas substring() will treat them as a zero i.e. 0.

Do let us know if you agree with the above mentioned differences between JavaScript slice(), substr() and substring(), by commenting down below.

Read More About:

Vikram Khajuria
Written By Vikram Khajuria

Jack of all trades. Covering the journalism field, Vikram writes at MobileAppDaily and keeps surfing the trends to understand tech and inventions better. Don’t forget his driving skills, he is a professional car rallyist. Life has just got better. Breathe it!!

Top Companies

InMobi
Singapore
Dot Com Infoway
New York, USA
M&C Saatchi Mobile
New York City, USA
Techmagnate
New Delhi, India
Fetch
London, UK
View full report

Latest Articles

Join our global community 135K Followers
app development

Cross-Platform Mobile App Development: An Ideal Guide

Vikram Khajuria 4 min read  

There is no stopping to the explosion of mobile apps. The spurt in apps can be credited to the evolution o the smartphones. From a simple alarm app to the complex navigational app, our smartphones are brimming with a number of apps.In 2015, global mobile app revenues amounted to 69.7 billion U.S

app development

Best Security Practices For Java and Android: Symmetric Encryption with AES

Tanya Singh 4 min read  

As an app developer, you want to make sure that the app you are building is flawless and secure from all the unethical attacks at the same time. And in order to make your mobile application secure from such cyber attacks, the app developers are required to follow certain security practices and strat

app development

Build Your First App With React Native

Vikram Khajuria 4 min read  

In this article, we will be teaching the basics when it comes to React Native and also further explaining how to create your first app with React Native.This post can be very useful for those who have only used JavaScript in their coding journey. So, fasten your seat belts and get ready to learn

app development

Future of Mobile Game Development is Already Here

Vikram Khajuria 4 min read  

In this day and age, it is hard to find a single person without a precious smartphone or tablet close at hand. This device is used for a variety of purposes: for business, entertainment, and everything in between. As technology advances, media consumption habits are changing and fueling the rapid gr