String Padding, Trimming, & Matching

[00:00:00]
>> Maximiliano Firtman: A string method is actually pretty cool, probably you have seen some of those or you have used some of those. We have now startsWith, this is ES6 by the way, startsWith, endsWith, includes. Okay, they are pretty straightforward. The one will check if a string starts with an another string if it ends with another string, or if it includes another substring.

[00:00:26]
If you have been playing with JavaScript for years, like myself, probably you have been playing with index of and then checking if it's minus one that minus one was giving you. Well, now includes it's more semantic. It will tell tell you if a substring is in there. And also we have a repeat, that I have it here and also I have it separated, I think.

[00:00:47]
But repeat will just repeat the string n times, again, straightforward. Just remember they are there, but padding, this is new from 2017. We have now ways we can take that string and apply, for example, padStart and padStart will receive a value, a length, for example, I can say 5 or I can say padEd with 5.

[00:01:20]
What's the difference? Well, here you can see I have 5 spaces before or after. But as you may be expecting, just using spaces. I mean, it's okay, but it's not always what you want. So that's why, when if you go to the solution here, it's not a big deal anyway.

[00:01:41]
There is a second argument where you can specify the character that you want to pad with. So a 0, okay, dash,
>> Maximiliano Firtman: Or something like that, of course, it can be any value here. Two things, two important things. First, the ECMAScript team here I think they made a mistake with the names because padStart.

[00:02:12]
It's actually not padStart, but padLeft, and padEnd is actually padRight. What's the difference when you are working with languages right to left, Hebrew, Arabic? Start should be from the right and that's not how it works, start here is always from the left, okay, so first warning. So, it should be called padLeft and padRight, not start and end.

[00:02:43]
But anyway, it is what it is. And also, another important thing is that what happens if I add more characters here? It's not just one character, I can add more things, and this is what he's going to do. It's padding with that pattern, repeating the pattern, okay? So it's not just one character, you can match a mix on one space for example,
>> Maximiliano Firtman: Or a dot or wherever, of course, it can be any amount of characters here.

[00:03:20]
>> Maximiliano Firtman: It would just repeat that pattern in the empty space untill it fills the whole width that we define. So trimming, will trim the spaces at the start or at the end but as we mentioned before, start and end here is not really taking in consideration right to left, languages?

[00:03:43]
And this is just the first one, is trimming the first characters, actually we should one by one, so you can see that these spaces are still there at the end. And if we do a console.log of that one, we have this space. It's just that matchAll, this is bigger.

[00:04:11]
Okay, I was actually in the middle of adding this under strings, or under regular expressions? Because it's a string method, but it belongs to more the regular expression. I'm not sure if you have played with regular expressions in JavaScript. I know that regular expression sounds scary for a lot of developers on any language.

[00:04:35]
[LAUGH] But anyway, ECMAScript already have a match method on strings where you can pass the regular expression and it will match that. It will try to find a substring, or it will tell you yes or no, it depends on what you're looking for. But it was limited, the first thing is that, if you wanna search you can use regular special for searching patterns within a string.

[00:05:06]
It was just returning you the first one. Okay, match O will return a collection of all the elements that were found on that particular string matching your regular expression. And also, now you can include capture groups, what is that? Let's see with that example, I think it will be clear.

[00:05:31]
So let's see, we have this string here, okay? So, within the string, of course, we can use ChatGPT for this now but we are JavaScript developers, right? We [INAUDIBLE] ourself, I wanna extract dates with this format. So, this text contains dates, so I wanna extract them from the stream.

[00:05:51]
So then I create a regular expression to match that particular thing. In this case, quickly, it says d is a digit, so number, and 4 means four numbers. So this is one group, four numbers, another group, two numbers, two digits, and another two digits, okay? Every parenthesis here is creating a capture group, that's a regular expression concept.

[00:06:21]
So now, I can take a text, the text, the string, and matchAll using that regular expression. Remember in JavaScript regular expression goes within these characters, okay, that's a regular expression and actually we receive an array of matches. If I run this, it's going to give me all the dates and also every group separately.

[00:06:49]
The year, and by the way, here we can use year six to say something like we wanna get. It from match, [fullDate, year, month, day] for match. So we can extract the data, because it's an array, in case you wanna create variables, okay, instead of using match sub 1, match sub 2.

[00:07:21]
So, I can extract the whole date and each group separately, yeah.
>> Speaker 2: Now could you put that destructuring and replace it with, could you replace the const match with const? And then the full [CROSSTALK].
>> Maximiliano Firtman: So the question is can I just do this?
>> Maximiliano Firtman: Well first, the premise that now I need to adjust all my references.

[00:07:47]
So I have the full date, year, month, go to a new line here, and day. Okay, I'm okay, so, yes, I can. So, I can destructure directly within the four of declaration? Yes, you can, in this case, I'm destructuring an array. But remember, it can also be an option or a complex destructuring.

[00:08:12]
Objects and arrays with objects inside, that's possible. Okay, make sense? Well, this was not possible before matchAll was available, okay? So, that's new in ECMAScript 2020, which is kind of cool for doing these kinds of things.