mobile app development

JavaScript Comparison of String.slice() Vs String.substr() Vs String.substring() in 2021

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

javascript comparison

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 at 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.

Aparna <span>Growth Strategist</span>
Written By
Aparna Growth Strategist

Aparna is a growth specialist with handsful knowledge in business development. She values marketing as key a driver for sales, keeping up with the latest in the Mobile App industry. Her getting things done attitude makes her a magnet for the trickiest of tasks. In free times, which are few and far between, you can catch up with her at a game of Fussball.

Want To Hire The Best Service Provider?
MobileAppDaily will help you explore the best service providers depending on your vision, budget, project requirements and industry. Get in touch and create a list of best-suited companies for your needs.
mobile app development

All About iOS 11 And iOS 12 Features That You Can't Miss

4 min read  

iOS 11 is ranked among the world’s most advanced mobile operating system. The OS can take any challenge head-on and promises to rank in the top. Like every other update, iOS 11.4 has brought new features into the armory. The introduction of augmented reality and ClassKit support has taken iOS

mobile app development

Top Platforms That Facilitate Creation Of Mobile Apps In AR-Format [2021]

4 min read  

There is no surprise that any AR expert desires to generate the perfect program and complete it in an easy approach. This piece of writing helps the experts to find 6 platforms to facilitate the creation of apps in AR-format and to improve knowledge on AR.Employing the given AR frameworks and or

mobile app development

How Much Does it Cost to Make an App in 2021: A Complete Guide On Pricing

4 min read  

The mobile app development industry is growing like never before. There are around 2.2 million apps on the App Store and a massive 2.8 million count on Google Play. this alone is enough to justify how mobile apps are practically transforming the world, like Nikola Tesla once predicted, almost a cent

mobile app development

What Are The Reasons For Mobile Apps Fail in 2021?

4 min read  

Mobile apps have been increasing popularity in recent years due to the many benefits attributed to them. They offer startups and medium enterprises a platform to compete on a level playing ground with the big boys. The quantity of apps on both Google Play, App Store and Windows Phone Store continues

MAD Originals
MAD Originals

Cut to the chase content that’s credible, insightful & actionable.

Get the latest mashup of the App Industry Exclusively Inboxed

  • PRODUCTS
  • SERVICES
  • BOTH
Join our expansive network, build connections and expand your brand presence.