字符串模板的增强

109 阅读2分钟

在使用字符串之前想要使用字符串,就需要进行一个拼接的操作

console.log('my name ')

使用这种方式来处理字符串就非常的丑陋,所以我们可以使用字符串模板让拼接字符串更加的优雅和美观

my name is ${}

需要使用着重号进行括起来

这里的拼接方式变的更强了

这里的阅读性也是更强的

在里面也可以写一个表达式

在这里也是可以写这样的一种表达式的

标签模板字符串

在一个函数的后面写上模板字符串就是标签模板字符串

如果在这里使用的话,会把什么东西传入里面去

其实是将模板字符串传入m里面

第一个参数会形成一个数组,这个数组里面将模板字符串里面的东西切割成三份

这里会切成三个部分

image.png

第一个参数是完整的字符串,只是将参数转换成一个数组之中

第二个参数的值是,第一个字符串的值

image.png

会将这里的javascript 的代码转化成css 的代码

会将里面的color的值进行一个替换

再将这种代码作用于style里的css代码

利用代码的这样一种方式进行解析

如果进行开发的话,使用的就是标签模板字符串

(思考:这里是否可以用一个...可变参数来进行接收)

es6中函数的默认参数

这个时候的m和n都是undefined,函数的参数里面可以设置默认值

image.png

在es5的时候会这样来写

这样写起来是非常的麻烦的,这里还要用一下逻辑或的

image.png

es6中可以给参数提供默认值

image.png

es6中的代码可读性变得更强了,这里的写法是没有bug的

image.png

这种代码的阅读性是比较查的

对于默认值进行一个解构

image.png

image.png

对于空的对象来说,可能没有值,我们可以将解构赋值进行赋默认值

默认参数使用的小技巧

image.png

有默认的值参数最好是放在前面的,一般情况下有默认值的形参最好是放在后面的

image.png

这里如果这里设置了默认值了,后面全部的参数都不会放入到length里面了

image.png

最好要把默认值放到后面使用

函数的剩余参数

image.png

会将传入的剩余参数传入到数组中,这里就是一个数组

这种语法就是剩余参数

arguments 和 剩余参数的区别

image.png

剩余参数用来替代arguments

arguments是一个假数组

arguemnts是早期ECMASCript的缺陷

image.png

可变参数必须放到最后一个使用

image.png

按照初始化是可以这样的写的