Nerd For Tech
Published in

Nerd For Tech

Basics of Javascript · String · padStart() (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 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.



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.