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

Jakub Korch
Jun 8 · 3 min read

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 fellow newbs! Another slacker method is ahead of us and today it is going to be padStart(). Let’s dig into it, so we can go for an ice cream or something.

The padStart() method keeps padding the current string with the given string until the resulting string reaches target length. In the case of this method, padding is applied from the beginning of the current string.

We need to provide one mandatory parameter which is the target length of the resulting padded string. Second parameter is optional and it specifies the string that should be used for padding.

Let’s see some basic examples for this method.

// no optional parameter
'"' + 'ABC'.padStart(10) + '"' // " ABC"
// current length >= target length
'"' + 'ABCDEFGHIJ'.padStart(5) + '"' // "ABCDEFGHIJ"
// padding keeps repeating in loop until target length is achieved
'"' + 'ABCDE'.padStart(10, "abc") + '"' // "abcabABCDE"
// padding stops once target length is achieved
'"' + 'ABCDEF'.padStart(10, "abcdef") + '"' // "abcdABCDEF"
// default padding sequence is one empty space character (" ")
'"' + 'ABCDEF'.padStart(10, " ") + '"' // " ABCDEF"
'"' + 'ABCDEF'.padStart(10) + '"' // " ABCDEF"

If the target length is less than or equal to current length, no padding is applied and string is left as-is.

Process of padding is done in a loop one character at a time. Once we apply the last character from the padding string and the current length of the string is less than the target string, we continue to pad starting again with the first character of the padding string and so on.

On the other hand, if we reach the target length before we use each character of the padding string, the padding process ends then and there.

The default value for the padding string is empty space, if no other string sequence is provided.

Okay, still nothing groundbreaking. But as always, we can make our lives more miserable. Why not do that, right? Let’s mess with the two code unit characters.

let emoji = "🙂";"Length: " + emoji.length                          // Length: 2// padding with characters that require two code units
'"' + 'ABCDE'.padStart(9, '🙂') + '"' // "🙂🙂ABCDE"
'"' + 'ABCDE'.padStart(10, '🙂') + '"' // "🙂🙂�ABCDE"
// padding with unicode values
'"' + 'ABCDE'.padStart(9, '\ud83d\ude42') + '"' // "🙂🙂ABCDE"
'"' + 'ABCDE'.padStart(10, '\ud83d\ude42') + '"' // "🙂🙂�ABCDE"

Here lies our loyal smiley face with code unit length of two.

As long as the padding hits both code unit values, all is good. But once we only pad with one code unit, there goes an unknown character.

We can try it directly with the emoji or we can use the unicode value for each code unit. The result is the same. Again, nothing we can really do, since this is a valid string sequence by any measure.

So again I should emphasize not to use those pesky two code unit characters for the padding. If you want to actually display them, that is. If not, knock yourselves out, by any means.

As the previous one — also this article is on point and short. Not much to talk about really. But thank you for your attention anyways. And as always — see you in the next article.

Jakub Korch

Written by

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

Nerd For Tech

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/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Jakub Korch

Written by

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

Nerd For Tech

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/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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