Web前端框架通用技术 ES6 7_字符串新增的方法和模板字符串 学习猿地原创

大家好，我是学习园地的特约讲师高洛峰，上节课咱们学习了赛和麦这样的数据结构，呃，上上节课呢，咱们又学习了数组里的方法，也有一个麦，它俩是有区别的，一个是数据结构，一个是数组中的方法，像这个方法呢，咱们在学像react的时候，React呢，因为不像vuee，还有什么微杠后这样的一个，呃属性，那可以能便利我们的页面中的成员，那在艾里面通常通过麦克啊去应用这是数独理心的方法，以及这样的数据结构，那咱们呢，来看一下。嗯，字符串里边新增的方法，为什么？嗯，咱们ES6里边经常在，呃，不是说经常ES6里边在数组里边和字符串里边新增加一些东西呢，因为咱们在编程的时候，你有可能有一半的时间都在写数组，字符串和对象都在处理这些内容，所以呢，他对数组字符串，数据结构进行了大量的这样的一些优化的一些操作啊，所以呢，这在这些对象中增加了一些东西，也不过。那看字串的新加功能，字符串新加，新加方法呢比较简单，这个判断以什么什么开头，判断以什么什么结尾，当然他不用这个能用正则也可以，对不对，但是新加这个方法正则会呃效率高一些，然后模板字符串，嗯，这两个呢，咱们再用一下比较简单啊，但是呢，呃，特别是模板字符串在原来这编程里边呢，是经常使用的。

来，我们新建一个号，就这里边。嗯，我们判断我们做一个变量吧，Let s tr，比如说我们做一个URL等于。HTTPS冒号3W点点。com有这样的一个注块，但是我们得写到哪去了，得写到SC里面对不对这里边才可以。然后我们判断是不是呃，以HTTPS开头的，对吧，那我们怎么判断呢？我们只要写上，如果这不是一个字块吗？Ul点对吧，使用这个方法是不是以什么开的，那我们是HTTPS，如果是HTP开头的，那我们就说嗯。这块打一下吧。

嗯，URLURL点后台里边打印一下，否则我们就把，呃不是诶。不是以HTTPS开始的。开头的。然后看一下很简单的一个判断啊，来我们运行一下。F12。你看答案出这个证明它是以这开头的对不对，那同样以什么结尾的，咱们看看是是不是以他结尾的，还是以FN结尾的对不对，那咱们直接判断，比如说ul点，这回咱们换一个换一个是嗯。DDS这个方法判断是不是以，比如说先结尾的，如果是以结尾的，那我们这块直接啊由。r.ROOG。我们打印这个，否则的话我们打印这块rog，嗯，这样吧。

不是以点心。结尾的。来，我们看一下。刷新一下不是一点结尾的，非常简单的啊，给大家稍稍演示一下就可以了，没什么，嗯，想用的时候就直接使用就可以了。我们看一下模板字符串是比较常用的，那我们以前声明字符串的时候经常会这样。比如说呃，因为单引号双引号生命字符串是一样的，在JS里面这是没有区别的，你不管使用单引号双引号都行，比如说这是一个字符串，对吧，那我们在这号一吧。那我们再生一个二，这是一个字算，我们用单引号，你看一下也是可以的。这个是没问题的，str1.og，还有str2.log来一下。看一下。这是一个字串，所以单引号双引号生成字符串是没问题的，那不管单引号双引号里边是不能增加变量的，比如说我这块来声明一个name等于。

学习原地，那证明了一个呃变量，那我想这个变量加到这里边中间对不对，加到这里边中间，这是学习原地一个字块，比如加个中间，那我能用的方法什么呢？你比如说我能能用的方法只能是外层双引号，它里边也是双引号，我加的一个方式在这块那。这样去使用。这是我们以前的一个用法。那我能不能这么用呢？你看啊，单引号双引号都是一样的啊，能不能我加一个高乐福，加一个大括号，这里边写一个名字就可以使用了，它能不能这么解析呢？你看一下。没有我们解析是不行的，对吧，另外这是不行，那如果一个字符串给我们，我们换成多长，你看它自动给我们加加号了，对吧，也是用连接的方式了，你看一下。

也就是一个字符串，不管是单引号的还是双引号的，你看它都会以加号的形式和我们连接，也就不支持字符串多行。是这样的。那什么是模板字符串呢？什么是模板字符串呢？它是字符串的增强版，用它标识它，可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中插入变量，用它是这个目的。你比如说。我们做一个这样的一个块。你说在呃。在我们里边经常我们声明一个，呃，是接S叉的就是。呃，这个代表叉ML对不对，就相当于像用HTML的模块那个HTML的方式，就L的方式去写JS的这样的一个语法，那假如说我们用这个反引号。它可以当成一个字串来用，比如这里边加个B标签，加个呃，这里边加个LOK吧，然后斜杠B标签，你看可以当成字符串来用，那这里边我们得用document那个去往页面里写，就不往页面写，直接也是conso去输出，然后JS插件输出，你看一下。

这里面是不是就当成一个普通字符串，但是这个字符串它跟我们其他的可不一样，不一样在哪呢？我们可以任意的去换行，你看啊，在这里边，我们可以在这里边加上，比如说加上一个啊一。然后这里边。这是标题，然后我们还可以嵌套很多个标签啊，比如说div里边嵌套个I标签对吧，这是标记随便写的，你看没有给我们加加号，可以直接使用。来我们运行。那。原形给我们显示在这块对吧，怎么写都是，然后我们用B那个B端说有这个处理ES兼容性嘛，当然还有一个把GSX的这样的句法给我们转换，对吧？当然那是艾里边我们去用啊，那刚才说的说这里边现在咱就介绍模板字符块，一是呢，可以当成普通字符串来用，另外呢，支持跨行，所以在这里边就可以写一些GSX的这样的一些语法，对吧，或者什么做法都行，另外呢，它还支持什么，支持变量，你比如说这里边我们标题T那个like title标题，比如说学习原地来一个量，然后我们再来一个slogan。

这块成就自己的只需要一套精品，那类似于这样的字算，那我们就可以在这里边把这标题我们去掉啊，使用高符大括号开头在这里边使用啊。比如说这款MK。在这吧，哪写都行，这个位置高大括号高大号里边。那就可以把这个变量插入到这里边，就不用加号了，也比较方便，相当于它写的是一个模板对吧？模板里边的内容我们用变量来替换，当然变量可以是对象里边的值，数组里边值都是可以的，对吧，里边怎么写都可以。

来手机上你看。就相当于他写的是一个模板，把它替换了，所以叫做模板字串，所以了解这个ES里新加的语法，就不用用加号去连接这些东西了，对吧？写起来就像我们写页面T一样，对吧？写完之后放到页面上去展示，那虚拟到呢？虚拟到我们在里边用的都是这样的一个方式去帮我们来完成的。所以呢，咱们得先介绍一下这模板字符串，所以咱们讲X的时候，我用到模板字符串有一些GS叉的这样的语法，大家不要陌生了，你就知道了，就两个作用，一个是可以换行多行字符块，第多行字符块还可以在字符块里相入变量就OK了，了解这下面这个好面认识一下就可以了啊，谢谢大家，这节课我们就讲到这里。