00:00
好,那么大家好,我是风雨,那么我们这节课呢,来看一下我们的这个ES6里边这个对字符串的啊一些方法的扩展,那么来讲这个字符串的方法扩展呢,我们得回顾一下ES5了,那么在eo里边,我们比如说用于确定某一个字符串里面是否包含了另外一个一个字符串的时候呢,我们其实只有一个方法,也就是我们所使用的index of对吧,那解决方法,那这个呢,相对来说是。不是特别能满足我们在这个日常中的这个工作的需求,那这个时候呢,Ec里边有对我们自串的方法来进行扩展,那么首先第一个呢,就是我们所说的这个includes啊include。DES括号includes,那么include是这个方法是怎么用的呢?用来干嘛的呢?首先这个includes这个方法呢,是会返回一个布尔值,它表示是否找到了某一个呃,参数字符上的意思啊,那就比如说我们这方,我们来列一个,比如说str等于一个,呃,Hello。
01:15
呃,Word啊,Hello word,那这个呢,我们这个地方有一个字符串,一个字符串,那这时候呢,我们来使用一下这个include啊这个方法,那比如说我们来呃打印一下。Str,因为这个方法最终会返回一个布尔值,所以呢,我们要把它输出出来对吧,说出来那就是str,点上include。括号那。前面调用方法的对象呢,是一个我们的母串对吧?一个母串,所以我们需要一个判定的这么一个字符串,那我就是说我需要在这个字符串里边,通过这个方法去确定某一些字符是否存在的时候,比如说你是否存在一个E字符啊,如果存在,那么它返回一个布尔值true来保存,就是个处没问题是吧?那你有没有E呢来保存,有的没问题,对吧?那你有没有e lo呢?
02:10
没有false对吧,诶false,那它这个呢,只会返回布尔值,告诉你在或者不在,而不会返回你的这个序号啊,不会返回这个序号,那这个呢是include。那么紧接着除了这个方法呢,还扩展了另外一个叫做start with啊start with,那我们来看一下这个方法怎么用,首先呢,我们这个地方还是一个母串,那我们来说一下这个start with呢,它这个是也是返回一个不值,那它表示的意思呢,是说参数字符串是否在原字符串的这个开始啊,开始start对吧,也就是说在某一个通过这种一个子串呢,去确定一下,就是说在你这个母串里面,你的头部,你开头是不是这个子串开始的,如果是那么就返回一个处啊,反之呢,就返回一个false,那我们来看一下。
03:02
Str,点上starts starts。那要注意是这个W是大写的啊,那这地方呢,我们这个字符串里面开头是谁啊,你开头可以说是H,是H1是H1 Lh1L是吧?Hello,甚至这个单词,或者说整个整个这个原创都是可以的,那我们来测试一下,比如说我们一样的先写个he,那这个时候很明显我们的这个字符串并不是以E开头的,而是H开头的,对不对?所以一来保存呢,返回一个false对吧?诶返回个first,那如果说写个H呢,那H就true了,对吧?那h he呢,H he也是true h he l呢,True h hello呢,是hello开头吗?是的没错,是hello空格开头吗?是的没错,明白吗?那这个呢,就是start with啊这个方法呢,相对来说还是比较的这个简单的,那么紧接着这个呢,是判断起始,还有一个判断结束的,那结束呢,就是使用的是n with对吧,怎么写呢,En d s。
04:04
End那这个呢,就是用来确定它的这个结尾,那结尾呢,是以hello结尾吗?啊,很明显不是,所以返回false,以谁结尾啊,你可以说以D结尾是吧,这没问题,以LD结尾也没问题对吧?以word结尾也没问题是吧?啊,它确实就是以word或者说以LD啊等等等等都可以啊,它这个呢,是用于确定我们子串是否是这个字符串的末尾啊就可以了,那这个呢,是这个N字位啊,N字,那么除了这个恩泽斯以外。还提供了另外一个方法啊,叫做一个repeat,我们来看一下,这个呢,是我们写在上面来了re repeat,那repeat这个单词我们在哪见过呀,我们在CSS里面对吧,这个背景是否重复的时候呢,有个什么repeat,或者说这个no repeat对吧,不重复,那所以呢,它的意思呢,就是重复的意思,那重复的意思在字符串里面呢,它其实就是说使用一个一个。
05:07
一个参数,那这个参数呢,它是个数字啊,就比如说我呢,这个地方,呃,我写短一点,那叫做hello,那这么一个字符串,OK,那这时候呢,我们通过我们的这个字符串对吧,来对我们的。这个。通过这个证来调用这个repeat啊,这个方法,那我们来看一下这个东西怎么用啊,我们一样的来把它输出一下str,点上这个repeat。要重复多少次呢?比如说我,那我让你来重复一个两次啊,重复两次,那么这个时候我们来看一下原创是谁,原创是不是hello这个,那么既然我现在有原创,我让你的这个原创里边的字符重复两次的时候,是不是就有两个hello了,所以就是我们来保存呢,你就发现它输出的是两个hello对不对,诶两个hello,那如果说是呃三次呢,那就有三个对吧,一次呢,一次就跟你原创长的一样喽,对不对,那如果说是1.5次呢。
06:09
诶,1.5次,他会不会从中间给我们来砍一刀对吧,把前面取过来,或者说把后面取过来在拼接上呢?诶这个呢,答案是不会的啊,不会的,当你写的是小数的时候呢,它会把你的这个参数小数啊,向下的取整作为一个整数啊,一个整数,然后要注意的是。我们这地方既然说的是重复,那如果说我写一个,比如说零次的时候,那到底是重复还是不重复,如果说不重复,那是不是就是原创,如果原创的时候是不是就表明了写零跟写一是一样的呢?我们来看一下写零和写一到底一样吗?来保存,你会发现写零的时候就没有了,就是一个空字符串了啊,它自己都不见了,能明白吗?那现在呢,就产生了一个一个空的这么一个字符串,对吧?那这个呢,是repeat OK repeat。那么在紧接着呢,我们再来讲一下这个,嗯,ES里边。
07:07
他给我们提供的两个补全,那这个字符串的,那其实严格来说呢,这个东西不属于ES2015了,它是属于ES2017的,那我们这个地方呢,也可以顺便来看一下啊,看一下那这两个方法呢,叫做pad start。嗯,这个S大写PA start,还有一个叫做pad n OK,那么这两个呢?哎,同样是方法,那我们来加下括号。那么这两个方法有什么用呢?其实这两个方法主要一个,前面这个pad start呢,是用于在这个头部补全,Pad end呢是用于在尾部来进行补全,那什么意思呢?比如说我们还是一个原创哈,OK,我们同样的来输出一下,输出str,点上pad这个start。括号。我们在这个字符串的前面去补全。补全些什么呢?
08:00
那补全是什么呢?首先我们既然要弹的补全,那么必然是我们的这个字符串长度不够的情况才会进行补全,对吧?因为你只要要是我的原字符串超过我们的目标了,那这个时候就谈不上补全了,那应该叫切割了,对不对?所以它既然是补全呢,就必然说我们补全的长度是大于它了,对吧?那我们首先得规定一下我们新的字符有多长,比如说这是五个吧,诶五个长度,那我让你到。七个,那我们写三个七,紧接着那现在我们目标是七个的长度,那它只有五个是不是不够了呀?那不够的时候用什么来补全呢?比如说我用一个N字符,一个N字符串来进行补全,那么这个时候它由于是在开始补全,所以会在这个原串的前面加上两个N,让这个字符串加上两个N以后达到七的这个长度是吧?拿到我们的目标,所以变为了n n hello,对不对,那这个呢,是排start,那如果说这十个呢,那在前面补五个N,对吧,补个,那如果说是五个呢?诶如果当这个长度为五的时候,是不是跟我原上长度一样,那就不用补全了,所以这个N写不写没有什么意义,就是hello,那所以一样的,如果这边写个四呢,还是不用补全,对吧?他也不会切割它这个方法是用于补全了,所以它也不会切割,你超过了呢就不管了,对吧,就返回圆圈就可以了,那这个是PA start,那紧接着我们来看一下这个PA end,那这个呢是在尾部补全,那么跟pad start的特性一样,就是必。
09:27
于你的目标啊,这是我们目标字上要超过原创才谈得上补全,所以这时候当你小这个小于等于五的时候呢,都是没有反应的,所以这时候我们一样的,比如说来写个九了,那我们同样是用N来补全,那这时候呢,N呢,它就跑到后面去了,对吧,它是一个尾部补全啊,尾部补全那这个呢,就是我们的这个排N以及排start啊,相对来说还是比较简单的,OK。那么最后呢,我们再来看一下一个字符串扩展里边一个非常非常非常好使的一个方法,那一个方法,那这个东西呢,叫做模板字符串,那么什么叫模板字符串,模板字符串是用来干嘛的呢?来我们可以来看一下,首先在我们ES6之前啊,就是说ES5及齐以前的时候,我们。
10:16
要把这个字符串诶跟某些变量来进行拼接的时候呢,这个其实是一个很头大的问题,对不对,也很头大的问题,比如说我们随便来举个例子,Let,诶,Name等于风雨,OK,那这地方呢,我们有个字符串风雨对吧,那我比如说我要来输出,我输出的时候呢,我要来一个let。一个str对吧,诶你好。我的名字叫叫什么要叫风雨,那叫风雨的时候呢,这个时候呢,诶我得给他拼接一下,比如说这个name来,诶这个name,那这个呢,呃是我们这个字符串拼接,那这个呢,只有一个,那我相信大家在写我们GS的过程中,特别是在ES5之前啊,我们写这个正线拼接的时候,当你发现拼接变得特别多的时候,这个冒号,呃简直让人很抓狂对吧,让人很头大,那简直也一不小心呢就很容易写错,那这个呢,是ES5之前的拼接,那我们来输出一下这个s sat tr来保存,诶你好,我的名字叫风雨,那这个是一个正确的拼接,没有问题对吧?那这样呢,弊端呢,其实是非常明显的,就给大家说的,当我们拼接的变量比较多的时候呢,会发现这个引号特别多,加号也特别多,就看起来比较的乱啊,比较乱,那么这个时候如果说我们要来使用这个模板字符串啊,或者说ES6里面对这个字符串的拼接呢,做了哪些改变呢?我们来看。
11:46
看一下我们一样的要输出的就是你好,我的名字叫风雨对吧,那这时候我们来看一下可以怎么输出,我们呢,就不用这个str,我们可以直接写对吧?那要注意的是这个模板字符串呢,它必须使用的是一个新的这么一个字符串的这个符号,诶这个呢,是在我们这个ta键的上面那个啊一个这个点啊这个点,那这个呢,叫做反引号,反引号,那这个字符串呢,是用反引号一对反引号包起来的,那包起来的时候,首先这里边常规字符串呢,我们就把它写上就可以了,来写上,那写上我要拼接这个内的时候,就不再需要后面写加号了,我们直接在这个字符串里边写上,比如说那。
12:29
哎,写name这样能行吗?不能行,为什么呢?因为在反引号这中间的同不同,同是变都是这个字符上,你要想到这个name变为一个变量的时候,该怎么办呢?我们需要使用它特定的语法,使用一个Dollar,然后呢,括号括号啊,一个Dollar,一个画括号,需要使用这个模板呢,来把我们这个变量给它解析出来,那这时候我们写个name放进去,那这个时候呢,这个地方就是告诉他是一个变量,它在输出的时候会去找到这个变量的值,把它填到这个地方,来,我们来看一下是不是这样的来保存,你好,我的名字叫风雨,那我们在后面再来加个感叹号。
13:07
啊,加些感叹号,那就是你发现你看我变量就是在中间啊,就在这个字符项中间就可以了,那这这变量的两边呢,我也没有使用什么这个加号啊等等一些乱七八糟的是吧,没有来保存,你好,我的名字叫风雨是吧,你看这个name呢,准确的变过风雨,那后面感叹号呢,就是普通的字符串了,对吧,那这个呢,就是我们这个模板字符串啊模板的那相对来说呢,这个东西还是比较的好使的啊,比较好使的OK。那我们呢,再来看另外个东西,最后一个了来保存,OK,那我们呢,把这个提出来,Let s t,那它现在呢,是个字扇对吧,一个字扇,那么来看一下啊,我们来看一下这我们ES6里边啊这个反引号,诶它呢可以作为模板字符上的这个字符上的标识符啊,标识符就开始嘛,开始啊这个时候呢,我们还可以怎么用,你看我这一串呢,如果说我在它前面,比如说我写上一个cancel.log啊cancel.log OK来保存,你就发现它这句话被输出了多少行输出来,31行输出了,就是这一行输出,那么这一行输出我们写那个can log没有括号呀,对吧?诶跟我们原来写的这个在空制台输出的这个log的下面这种写法不一样,下面的代括号。
14:36
一个函数执行,那上面呢,没有括号,但是呢,它执行了,并且还输出了这么一个数组,对不对,输出了这么一个数组,那么要注意的是这种写法呢,哎,就是我们所说的这个标签模板啊标签模板,那标签模板呢,其实它并不是一个模板啊,而是函数调用的一种特殊的形式,也就是说这种写法呢,它把你这个字符串前面,一旦你加上了这样一些像变量一样的啊这种东西的时候呢,它会把你作为一个函数名,那这个时候呢,诶,这两个反引号呢,就变为了一对括号,那括号里边呢,就是这个函数所执行的时候的参数啊,所执行的时候的参数,那么这些个参数。
15:20
这些个参数呢,你发现它输出的是个数组,那首先数组呢有两项,你看数组有两项,首先第一项呢,哎,是一个数组对吧,第二项呢。第二项是什么?第二项你看这个数组里边啊,第二这是第一项啊,数字这第一项,这这是它的参数第一项这个数组,那第二项呢,是我们一个叫做风雨的这个字符串,那那它这个是什么意思呢?它这个意思是这样的啊,把我们字符串里边一整串都作为这个函数的参数,那函数参数呢,首先把这个参数字符串里边除了这种变量部分以外的所有东西都放到第一个参数里面去,那放第一个参数呢,第一个参数组,那这时候呢,他把这一串取到了数组的第一项,你好,我的名字叫逗号第一项,紧接着后面又是个字符串,又把这个感叹号这一部分呢,放到了这个数组的第二项,如果说我后面我还有紧接着再来个变量。
16:18
哎,再来变了,我们来写一下啊,变了那这地方比如说我随便写一个啊,叫做age。A级呢等于18,那我把这个A级写到这。哎,那今晚感叹号,诶,我今年。哎,多少。我今年age c对吧?HC,我今年18岁了,那这个时候我们来看一下啊,我们先来分析一下,你看我们说了,他把这个字符串里边除变量部分以外的所有字符圈放到一个参数的这个数组里面去了,那这时候也就是说当我们来输出的时候呢,这个数组里边,这是数组的第一项,这是数组的第二条数据,那第二条数据呢,到这个地方是不是一条啊,哪一条,那紧接着这个是个变量嘛,那变量后面又有个一个字符串,那这是第三项,也就是当我们保存以后,这个数组里面应该有三条数据,第一条是前面的你好,我的名字叫,第二条是感叹号加后面的,我今年来,那这第二个第三个呢是个C,然后第四个这个这个是参数的第一项,也就是数组数组里面的每一项,那么当我们数组把所有的作标放完以后呢,这个变量呢,就依次的排在我们这个数组的后面去了,所以内呢,是在函数的第二个参数啊,第二个参数A级呢,在我们函。
17:36
数的第三个参数,我们来看一下是不是这样的来保存,你就发现这地方是你好的名字叫,然后感叹号。那这地方呢,有一个空格对吧,那空格紧接着接着我今年是吧,我今年我今年多少岁啊,后面的C呢,诶是数组的第三条数据,那这样呢,是函数的第一个参数数组,那第二个参数呢,就是风雨,第三个参数呢是变量18,明白吗?那这个呢,就是标签模板啊,谢谢大家。
我来说两句