Nerd For Tech
Published in

Nerd For Tech

Basics of Javascript · String · substring() (method)

This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.

Hello to all the loyal dev newbs! I am going to introduce you to a new method of String object. But it has a catch. It is almost identical to two other already existing methods. We already covered one. The other one will not have its own episode, because it was deprecated. Exciting stuff awaits us today. Get ready.

Our method of the day is method substring(). This method extracts the characters from a string, between two specified indices, and returns the new substring.

The method has two parameters. The first parameter is required. It is a position, where the extraction starts. The second parameter is optional and specifies the position (up to, but not including) where to end the extraction. If omitted, it extracts the rest of the string.

Sounds familiar? It should, because so far this definition 100% fits the method slice(). Ok, so where exactly is the difference? Well, first of all, when the start position is greater than the end position, this method will swap the two arguments. Another difference is that if either start or end position is less than 0, it automatically defaults to value 0.

I will show you these differences, but first let’s cover basic usage in example 1.

const str = "Hello Dev Newbs!";// length of the string
"Length: " + str.length // Length: 16
// getting the whole string
str.substring() // Hello Dev Newbs!
str.slice() // Hello Dev Newbs!
// start extraction at position 6
str.substring(6) // Dev Newbs!
str.slice(6) // Dev Newbs!
// start extraction at position 10 & end at position 14
str.substring(10, 15) // Newbs
str.slice(10, 15) // Newbs

All of the basic usage is the same between slice() method and substring() method. I will show you the differences between them in the second example.

// start position is greater than end position
// swaps the two parameters
str.substring(9, 6) // Dev
// returns empty string
str.slice(9, 6) // empty string
// negative value as position
// defaults to value 0 for both parameters
str.substring(-6, -1) // empty string
// counts backwards from the end
str.slice(-6, -1) // Newbs
// negative position & swapping at the same time
// change -1 -> 0 & swap (6,0) -> (0,6)
str.substring(6, -1) // Hello
// starts at 6 and ends at 15 (16 - 1)
str.slice(6, -1) // Dev Newbs

First mismatch is when the start position is greater than the end position. In case of the substring() method, two parameters are swapped and used that way. No problem. For the slice() method, this means an empty result.

Another example is using negative values. You can encounter different situations, but I will cover two most common. If both parameters are negative, you get an empty string with the substring() method, because both values default to zero. With the slice() method, this is no issue and it uses negative values without a hiccup.

The last case is the negative position as the second parameter. This will cause the substring() method to first default the second parameter to value zero and then swap it with the first parameter. On the contrary, slice just uses the second negative parameter to find the correct end position.

I mentioned yet another similar method, that has been DEPRECATED. That means it should be no longer used, because it will be eventually removed from implementation.

Name of the method is substr() and this method returns a substring based on two parameters. First is the start position and second is the length of the substring to be extracted. The second parameter usage is the first obvious difference between two other methods, that specify end position as the second parameter.

Let’s see how it fares when we provide the same inputs in example 3.

// basic usage 
// starts at position 6, ends at position 9
str.substring(6, 9) // Dev
// starts at 6, returns next 9 characters
str.substr(6, 9) // Dev Newbs
// start position is greater than end position
// swaps the two parameters
str.substring(10, 6) // Dev
// starts at 9, outputs next 6 characters
str.substr(10, 6) // Newbs!
// negative value as start position
// defaults to value 0 for start position
str.substring(-6, 5) // Hello
// counts from end backwards and returns 5 characters
str.substr(-6, 5) // Newbs

First obvious difference between the meaning of the optional second parameter shows the first case. Substring() extracts substring between two provided values of parameters. On the other hand, substr() starts at the position specified by the first parameter and then extracts substring with length equal to the second parameter. If the second parameter is not provided, it extracts substring from starting position till the end.

Second case shows a difference when the first parameter is greater than the second parameter. Obviously there is a difference, but unlike slice() that would return an empty string, substr() uses a second parameter to specify length of the substring, so the fact that the second parameter is less than the first parameter causes no issue and we just extract different parts of the string.

The last third case highlights a different approach to negative values as the first parameter. While substring() defaults this value to zero, substr() uses negative value without any issues and simply extracts the substring from that position.

So much for the substring() method and DEPRECATED sister method substr() and their similarity to slice() method. Each of them has its own unique use case where others fail, so it is up to you to decide which one to use and when.

As always, thank you for your attention. I will see you soon with another method.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

3 Fun, free & cool open APIs to use in your next JavaScript project

Resizing an SVG using Media Queries

8 Important Skills You Need To Know As A JavaScript Developer

Making The Enemy Shoot Backwards!

5 USEFUL ALGORITHMS IN JAVASCRIPT

Javascript Coding Challenges-part01

Tricky Javascripts

6 Unique APIs For Your Next Project Along With Ideas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jakub Korch

Jakub Korch

Web enthusiast, programmer, husband and a father. Wannabe entrepreneur. You name it.

More from Medium

Add or remove item from an array in javascript

All you need to know about arrays in JavaScript

Map, Filter and Reduce in Javascript

Efficiently load Javascript with defer and async