JavaScript

Javascript Substring

Javascript is a scripting or programming language of the web. Strings are an important part of the variables in any programming language. We often need to manipulate or extract some specific string according to our needs or somewhere we don’t have to show all the text. You must have seen some data (if we specifically talk about strings) on the web that are not fully shown on the screen. How did that happen? How can we get some specific part of a string? So, let’s take a look at what is a string and how we can take a substring of that string.

String & substring

A string is simply a text or characters which can include alphabets, numbers, or symbols.

A substring, as it’s in its name. A subpart of a String.

https://lh4.googleusercontent.com/uHTm-cF8_jZa1cLPZumhze0WCNQDY8mkMYsqPAxQ-V9_zB49jUzCu7D8j-n_M2w3ZpbUyOvZobZN0i4Oa3-howML2Q1nP1TCJBgSYZhEkZjkKF7f9XweZnwv_lMXKND4OiGbmdPA

If we talk about string in javascript. Javascript has some built-in functions for manipulating string. One of them is substring() a function that serves our purpose. If we want to extract some specific parts from a string. We can use substring() function.

Syntax:

The syntax for the substring() function is

string.substring(startIndex, endIndex);

startIndex is the index from where you want to start the string.

endIndex is the index where you want to end the string.

Examples:

If we suppose a string, like “linuxhint”. We want to just get the “Linux” from the “linuxhint”. So, we will do that using substring() function in javascript like this

name.substring(0, 5); // “linux”

https://lh3.googleusercontent.com/_oJwak5LVqptHp60d4EQIRBNQDrqNhqoyin5fYDHWJZtnHHRPEhLwlUbFGwcHDtiwshqqCEcL8D66K8KuJ-gG_gQtCgBCiybj5bQVPEeHDoDozTH1qMtgMPqOcPnD4-1wPHpGRdg

Now, if you notice that it doesn’t include the 5th index element. But, it picked the 0th index element. Which implies that startIndex gets included. While endIndex doesn’t get included.

https://lh3.googleusercontent.com/vmG6TYoh7JIx67LzM5GUYHMPU9MeYqKaWs_ESh8E4ydBbR3Gsm9OxjbVn-1UV7-sHlUflWsWm4mfMH-PDEQxZDUNaGf0CNNSRv9LxndbKcR_BJSo26-RKHC-xawDXuTkFi1Sng5D

So, now if we want to pick the “hint” from “linuxhint”. Although there are only “0” to “8” indexes. But, we will give “9” as a value to the endIndex.

name.substring(5, 9); // “hint”

https://lh5.googleusercontent.com/p2wQAs80TK0Kj31P39u-5pPFioz63k9lxDnqSLQVjub5_-lwUrAylgDKMb4PNJSwpHsCp1HvZhZaxz6Vu4yQtLbieur6GjY6OyU8h6XylQoVazqJneEO4KBcmCYQgA3wKAUhaKp1

We can give it only one value as well.

name.substring(5); // “hint”

https://lh3.googleusercontent.com/RNbhmYqXYG76_cbjYpj9tJWs5kKN-4I30F0cQYkB0oHGT0dvhuq2eXSF_PNOrXOTsgckzqmuvdRTw46khrghCYBE-0A-cz-PdC8x1MQbJ2iObWpU1dGVM5u6xE4w1iQ8m65sU5iE

It will start from that index and continues until the end of the string.

Alright! Now, we have seen the syntax and how does it work. Let’s see some of its exceptional cases.

Exceptional Cases

Let’s try to give a startIndex greater than the endIndex and some negative values to see how does it respond.

startIndex > endIndex

If we give it a startIndex greater than the endIndex.

name.substring(5, 2); // “nux”

https://lh6.googleusercontent.com/IpQYUvtGhHnQb8ZjCYIRyfjxbG-aFc1drgQ7SEf6HBegFikMi4ftNClRrUku_L-W0WJD_htbvSCvtuUSkPxTsk73qr9NaKk6Rc6VD31K_qEysbY20y-JttKUEYJh-hMjlx0bPDrr

It has swapped both values and printed the string from the 2nd index to the 5th index.

So, if we write either name.substring(5, 2) or name.substring(2, 5).

//both will print the same output
name.substring(5, 2); // “nux”
name.substring(2, 5); // “nux”</td>

It will print out the same output.

Negative values

substring() function doesn’t take negative values. If we give it a negative value. Since there is no negative index. It takes it as a “0”. Either we give a negative value to the startIndex or the endIndex. This function considers it a “0”.

name.substring(-5, 2); // “li”

https://lh5.googleusercontent.com/9prqpUmZAkL0VyupmbQYPBOmQekSGZH106i0ugLij8RfJG7WRrk-edBIAj9CG3lekM_AU2LQSNbPNYgtjiZaogNgrW0iKJfkjsno8WRteU9quTfVeOUXjiVkanyqWDFyxq5-MhpD

If we give a negative value to the endIndex. The function will swap the values. Because negative value will be converted to “0” and “0” will be the lowest value.

name.substring(5, -2); // “linux”

https://lh3.googleusercontent.com/DI4NJ-ZCYorJQq8jdpyn9QlnIVh4BdejYqPKbwM3jNYKMm9As8nVohaso46toZl7RVlzF0BGZhwNKGYCZxoBkRaUAnXvrcsLRrjSx_E_Fl9YBnepwLCIWbwpcxFbqb9KAAQgj43i

And, if we give a negative value to both of the indexes. The function will print an “” empty string.

name.substring(-5, -2); // “”

https://lh6.googleusercontent.com/uK0FYionYJQiIfDT4IV5oJchii54VJqLKCAGBdM-Pq_ZD14zA4ZWHkrH19QH2qQazd675Yb7-1tTUa3Nof2BI42vu1S76FiXYidXR43CNniD9yGFc5DJFAjh7xZKPYMX4hlf7Yxl

Pro tip

By the way, here is a pro tip. We can use string.length function within a substring() function.

name.substring(5, name.length); // “hint”

https://lh5.googleusercontent.com/3ppEd_KGqD3LXjCwy1ZFyotY_g01YobQtcrgHbnyAQx184LNC5lBkINaRtH3ZaIJdx_sJLN_X-X0mVQyUlF5mnuuh-_RfBLfBayv7LAzP7miR9qs3nE0C7dExcUdJ65JxkUZzQ8l

Or we can give it a string.length – [value], like

name.substring(5, name.length - 1); // “hin”

https://lh4.googleusercontent.com/XuuuffQ21J3Tt6fPUA4iYMbSbAfWV2OqKijKJCd_rgko-Sgurd_Hr1uK_KwdJOZ9LCJgTls9GHb3Ow_KtdNAx3E1QKRuJaMF2EvTJhZXOLqywGAEBT_MiwQ83v3NJ8sUEnYjVLw_

Conclusion

So, after reading this article, you should have a profound knowledge of the substring() function. Because you have learned all about the substring() function. All of its exceptional cases and how can we manipulate the string according to our needs. So, have fun with the strings.

About the author

Shehroz Azam

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.