Basics of Javascript · String · padEnd() (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! We have some tough methods behind us and now it is time to relax a bit with some good old simple and straightforward methods for making space for our strings. Meet padEnd().
The padEnd() method keeps padding the current string with the given string until the resulting string reaches target length. In case of this method, padding is applied at the end 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'.padEnd(10) + '"' // "ABC "// current length >= target length
'"' + 'ABCDEFGHIJ'.padEnd(5) + '"' // "ABCDEFGHIJ"// padding keeps repeating in loop until target length is achieved
'"' + 'ABCDE'.padEnd(10, "abc") + '"' // "ABCDEabcab"// padding stops once target length is achieved
'"' + 'ABCDEF'.padEnd(10, "abcdef") + '"' // "ABCDEFabcd"// default padding sequence is one empty space character (" ")
'"' + 'ABCDEF'.padEnd(10, " ") + '"' // "ABCDEF "
'"' + 'ABCDEF'.padEnd(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 target string, we repeat padding 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, nothing groundbreaking so far. But as always, we can make our lives more miserable than they already are by introducing characters that take space of multiple code units.
let emoji = "🙂";"Length: " + emoji.length // Length: 2// padding with characters that require two code units
'"' + 'ABCDE'.padEnd(9, '🙂') + '"' // "ABCDE🙂🙂"
'"' + 'ABCDE'.padEnd(10, '🙂') + '"' // "ABCDE🙂🙂�"// padding with unicode values
'"' + 'ABCDE'.padEnd(9, '\ud83d\ude42') + '"' // "ABCDE🙂🙂"
'"' + 'ABCDE'.padEnd(10, '\ud83d\ude42') + '"' // "ABCDE🙂🙂�"
There goes our good old emoji 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. That’s too bad, but unfortunately nothing that we can do about it. Because technically, there’s nothing wrong with the string. Yes, it is ugly and we can not read the last character, but other than that, it is a perfectly valid string sequence.
So, you know, just don’t pad with two code unit characters if you don’t have to..okay?
This article was a bit shorter than usual, because there’s really not that much to cover. But anyways — thanks for your attention. I will see you in the next one soon.
