Press "Enter" to skip to content

ES6 Tutorial – #12 String API


hey guys in this video we’re gonna talk
about some of the new methods added to
the string API in es6 and let’s begin
with a following example let’s say we
have a URL so it’s gonna be a URL with
HTTPS and the domain is gonna be
example.com and let’s say we wanted to
check if that string that URL begins
with HTTPS so what are the options here
well one of the options that you might
have seen would be to use the sub string
method so the substring method accepts
two parameters the first one would be
the starting index so we’re gonna be
looking from the very beginning that’s
why it’s coming zero and the second
argument is gonna be the ending index so
in this case this would be because we’re
looking for HTTPS this would be HTTPS
that length and then we basically want
to check if that string returned from
the substring method is going to equal
to HTTPS okay in fact let’s also do a
constant pattern and it’s gonna be equal
to http that’s the pattern we’re looking
for and let’s just replace those two
values okay so if that condition
succeeds we’re gonna console.log secure
otherwise we’re gonna console.log not so
secure so once again this substring
method is going to get a substring from
the URL it’s gonna start at index 0 and
it’s going to go up until but not
including the length of the pattern so
in this case the pattern is HTTPS and
it’s five characters long and the Colin
is the fifth element so it’s actually
going to look just at HTTP so what’s
changes to http for example so this
should fail and it does as you might
expect another approach that you might
encounter would be with using the index
all method so basically you pass the
pattern to the index of method and then
you want to check that the index of that
pattern inside of the URL is equal to
zero meaning that that pattern is
precisely at the beginning of the URL
now if we change it to HTTPS it’s going
to succeed and we get secure but the
problem with this approach is that it’s
actually going to check
the entire string until it finds the
match and in this case it only needs to
check the very beginning on the string
really it doesn’t need to go through the
entire string and check it whether it’s
in there or not so for that reason we
actually can use another method as soon
as the last index of so we’re gonna pass
the pattern just like before
so we’re also gonna pass a second
argument so the way last index of method
works it actually checks the string
backwards and it’s actually going to
look for the last occurrence of the
pattern so what we’re doing here is a
bit we’re basically saying alright so I
want to check the string backwards and I
want to begin at index zero so we
basically just want to check the very
beginning of the string we’re gonna look
for that pattern at the very beginning
and then we also need to put the
condition meaning that the index needs
to be zero the pattern needs to be the
very beginning of the string and in this
case we can secure but if you switch to
HTTP you’re getting it not so 64 now as
you can imagine all of these approaches
are sort of like declarative meaning
that you have to explicitly define the
logic for finding the pattern and then
checking whether the pattern is actually
at index zero and it’s a little bit
cumbersome to write so there’s actually
a new method in es6 and all you have to
do now is just to call URL starts web
and then you pass the pattern to it so
if the URL is gonna start with HTTPS
we’re gonna get to cure otherwise we’re
gonna get not so secure another thing
you might do with that method is to pass
another argument to it so let’s say
what’s the other URL but let’s say you
wanted to check if the URL starts with
example at some index well in this case
the index would be 0 1 2 3 4 5 6 7 8 so
we want to check if the shrinker begins
with the word example at index 8 so
unless case you pass a to it and let’s
do console on that we’re gonna get true
but for instance if you pass something
different if you look at index 5 of
course that’s gonna be false because we
have a Colin at index 5 let’s move on to
the next example let’s say we have a
domain
and I’m gonna stick to example.com and
let’s say we wanted to check if that
domain ends with com so a commercial
domain so one way to do this would be to
actually use the substring method so you
would do something like domain substring
the first argument would need to be the
starting index but there’s one caveat
you’re also allowed to pass a negative
value and if that’s the case then that
negative value is actually going to be
taking from the end of the training so
I’ll show you what it means in a second
but let’s say we have a pattern here the
pattern we’re looking for is calm so if
we pass a negative value of pattern
length to the substring method and then
we compare it to the actual pattern
that’s gonna be the right condition so
it’s two console.log it is a commercial
top-level domain right otherwise
console.log it is not a commercial
top-level domain so what we’re basically
doing here is we are getting the length
of the pattern in this case it’s four
characters and because we provided a
negative value the substring method is
actually going to check from the end of
the string so it’s going to subtract
four characters and it’s going to start
at this position right here and then you
might know that the second parameter to
the substring method would be the length
of the string well in this case it’s
just gonna go to the very end of the
string so it’s gonna look for this
pattern dot and then comma in the
scenario it matches the pattern that we
have defined as a constant but we might
change it to let’s say dot organ and in
this scenario this would not be a
commercial top-level domain another
thing you might also do is you might
also use index or method so we could do
something like this in the main index of
and then we pass the pattern to it and
then it gets a little bit more
complicated so we need to have the
length of the domain and we need to
subtract the length of the pattern from
it and then we need to check whether
that value is actually a valid index
whether that value could have been
found as an index inside of the shrink
so what we’re doing here is we basically
get the lengths of the domain of this
string then we subtract the length of
the pattern and then what this becomes
is an index at which we actually begin
looking inside of the string so we begin
looking for the pattern beginning at
this index and once we do that we check
if that patter is actually found
beginning at this index and if it is
then we get a positive integer otherwise
we get to minus one so the check here
basically says if you were able to find
the index that index would be a positive
value otherwise it’s minus one meaning
you are not able to find the pattern so
we go to the second clause now like I
said this is very very confusing so
there’s not actually a new method for
checking if a string ends with a given
pattern so we basically just call ends
with and we pass the pattern inside of
it so if I change the pattern to calm we
can see that domain is indeed a
commercial top-level domain now there’s
also a second forerunner that you can
pass so let’s say we have a constant log
statement here and we try to do the main
da dance with and we still have the calm
but let’s say we wanted to change the
URL to something like example.com slash
index.html wanted to check if that com
is what the domain name actually ends
with so we can provide the second
argument which would be the length of
that domain name right so we could do
something like this right so I’m just
gonna put the example comm length and in
this scenario it’s gonna be true we’re
basically getting the length of example
comm let’s just console.log that value
just see what it’s like in this case we
get 11 so the length of this string is
11 we’re passing it as a second argument
and we’re saying all right so just look
for calm at the end of that specific
substring you could say now what about
checking if a string contains a value
inside of it and this is sort of like
what ends with allows you to do but
there’s actually a new method that is
much clearer and more suited for this
tasks so I’m gonna just clear out the
old code let me clear any console so
let’s say we had a URL and it’s going to
be an HTTP URL and example.com
maybe slash posts and maybe also my
first post okay now let’s say we wanted
to check and I think I did a title it’s
not that whatever that was it’s a Const
okay so we want to check if the URL
contains posts there’s a few ways to do
it one of them would be to use the
search method and the search method
except a regex expression so if that
string that contains the post pattern we
also need to provide a check here so the
index would not be -1 meaning that it’s
a positive integer I’m gonna do
console.log we are looking for a post
okay otherwise console.log we are Kania
or something else okay so as you can see
this approach actually works but it’s a
little bit slow because we’re using the
regex expressions a bit of a different
approach would be to use index of again
so we’re looking for both and we just
want to check that the index of that
pattern doesn’t equal -1 and once again
we get that value but if we change it to
let’s say articles of course we’re gonna
get the second console.log because we’re
not able to find posts inside of that
URL but a different approach would be to
use includes method that’s been added
and es6 and so we just want to check if
the URL includes posts okay so let me
switch back to post and we’re able to
find it in a string as you can see the
very last scenario we’re gonna talk
about is repeating it shrink so let’s
say we have a warning here and it’s just
gonna say warning I’m also gonna add a
space and let’s say we have another
constants that denote the number of
times that we want to repeat that
warning so let’s say you wanted to have
a new string and that contains the
warning repeated three times okay so one
way to do this would be
well let’s say we have a console.log
yeah so one way to do this like I said
would be to use first of all an array
constructor so what we can do here is we
can pass the number of times to the
array constructor so let’s as you can
see it’s gonna create an array that has
three undefined elements so basically
three empty spots okay and then once we
get that array we can also call a join
method on it and then we pass the
warning inside of it as you can see here
we get the value twice and not three
times now in order to solve that we also
need to increment the value here and the
reason for that is because when you call
join with some kind of a pattern or a
string that string is going to be
injected between the elements of the
array so in this scenario you have three
elements so when the warning is serve
like injected between the three elements
you get two warnings and that’s why you
need to increment it by 1 and the other
thing you would also do is remove the
new keyword so here we’re using the
array constructor but you could also use
array as a function and it’s basically
going to do the same thing as you can
see here we get the warning then there’s
also a space here at the end so the one
thing we could do is we could also call
the trim method on it okay the other
thing we could do with es6 now is we can
take the string itself warning then we
can call repeat on it and then we can
just pass the number of times so not
only does this work the same way as
before and of course you get also a cold
trim if you want to get rid of that
extra space at the end but this also
reads much better so this isn’t much
cleaner API we’re saying ok I have a
warning string I want to repeat it three
times or whatever the number of times is
you know we can change it to anything
else at this point so it’s much more
readable and understandable and this is
pretty much it for sring methods and es6 let’s move on to array methods now

Please follow and like us: