Transcript from the "Padding & Trimming" Lesson
[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: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.