Padding & Trimming

[00:00:00]
>> Kyle Simpson: It almost seems like a rite of passage that JavaScript developers as they come into the language have to write their own standard libs sorts of utilities. And some of the most common utilities that you start with when you're trying to figure out how do I get stuff done are things like padding a string with some character or white space and/or trimming that kind of white space or padding character off.

[00:00:23]
Well, unfortunately, there won't be any more of that because now JavaScript actually has string padding and string trimming built into the standard lib, that is on the string prototype. We already have these features now built in. One set of them which is string padding was added in ES2017 and then string trimming was added into ES2019.

[00:00:47]
So if we take a look at this idea of padding and trimming, the first thing that we need to ask is, are we doing it on both sides or are we doing it only on one side? Now, you might not have thought about this before, but there is a nuanced detail that's quite important, especially JavaScript used in internationalized settings.

[00:01:08]
In the English speaking world, we often just think, everything moves left to right. So if I need to do something on this side of the string, I can just call it left and if I do something here then I call it right. Well, what about RTL languages? Left and right would be reversed in that sense, so left and right are not the appropriate term to describe the beginning and the end of your string.

[00:01:33]
So there was for a while people doing left pad and right pad, and famously, you may remember a few years back we had the big left pad debacle on NPM. So this whole left and right thing, well, we don't have left and right anymore. We don't have left and right padding, we don't have left and right trimming, instead, we have start and end.

[00:01:53]
So let's take a look at padding to begin with. We have padStart, which pads the start of the string and it automatically detects if the string is an LTR and it does that on the left hand side. If it's an RTL language then it does it on the right hand side.

[00:02:11]
So padStart takes two, it takes two arguments, one of them is required. The first one of them is required, and the second one is optional. The first one tells you how many characters, but is this something that tripped me up, so it's a little nuance that you have to get straight in your head.

[00:02:27]
You're not telling it how many padding characters to add, you're telling it what length you want to pad to. So if I have a string that is already five characters long and I say padStart, it's not gonna add any padding, because it's already five characters. And if it was longer, it also wouldn't add anything.

[00:02:45]
But if I say padStart(8) ,with a string that's already five characters, like line 5, it has to add some extra characters to the left-hand side. By default, it uses the standard ASCII 32 character space. But you can override if you want to use a different kind of character for your padding.

[00:03:04]
So line 7, you see I can use an asterisk, and in fact I don't even have to do a single character. I could have a multiple character string from which padding characters are pulled. So line 9 shows a 5 character long string to pull padding characters from, and you'll notice that it adds 123 on to the start of the string.

[00:03:28]
So it starts from the leftmost character in that list of pad characters and it pulls them until it needs it and if it runs out of characters in doing so, it just wraps around and keeps repeating. I will say that I have never in the four years that this has been in existence had any use case for a multi string padding.

[00:03:52]
I've never had any use case where I needed to specify anything other than a single character for padding. So, it's a bit of a nuance that I don't think you'll often run into, but in just in case you run into one of those situations that's how you do it, you can provide a multi string pad source.

[00:04:10]
You might think by the way, since it's called padStart that it would pull padding characters from the start of the string. That's not exactly what it does, it actually pulls them from the left of the string regardless of the language. So if you're working in an RTL environment and you have a multi string pad source, be a little bit more careful.

[00:04:35]
So if we have padStart, then obviously we're gonna need a padEnd. And padEnd is formatted exactly the same way. You tell it a number to give it the target length that you want the string to be padded to. And so here, 5 gives us the same string, 8 gives us a string with three spaces on the end of the string.

[00:04:57]
One little strange nuance is now line 9 we're working on padEnd and you might think that it would pull its padding character from the end of the string that you provided, but nope it still pulls them from the left. So it just the pad source is always pulled from the left regardless of start or end, and regardless of LTR or RTL.

[00:05:21]
So that is our padding and it doesn't really make sense to have a pad that would happen on both sides. But if you needed that, you could of course call both padStart and padEnd and you would get a string with it happening on both sides. It's much more common as we'll see on the next slide that you might need to trim from both sides.

[00:05:41]
But here, it's thought that you almost certainly are gonna, like if you're formatting things for tabular output or something, that's the most common used case for needing to pad something on the start or the end of the string. Speaking of trimming, we don't have left and right trimming, we have start and end trimming.

[00:06:03]
But we also have a trim method and by the way, the trim method has been around a lot longer, that's been pretty standard for like many, many years. I don't even remember exactly which JavaScript version that's been in. But a lot of people don't even know that there's a trim method on strings and they end up implementing their own or using some utility library that has one.

[00:06:24]
Trim was already built in there, it automatically would trim from both sides. Now we have those counterparts of trimStart and trimEnd. They don't take any arguments cuz there's no configuration to do there. They only trim white space, but it's not just the character 32, ASCII white space, it's basically all Unicode representations of white space.

[00:06:45]
So check MDN if you're curious about the really nuance which ASCII code points does it trim. But essentially all the white space that you would imagine like space, and tab, and new line, it will trim those off. So now we can pad and trim our strings.