1.模版字符串的详解
1.1 模版字符串的使用方法
在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常丑陋的(ugly)
ES6允许我们使用模版字符串来嵌入变量或者表达式来进行拼接
- 首先,我们会使用``符号来编写字符串,称之为模版字符串
- 其次,在模版字符串中,我们可以通过
${expression}
来动态嵌入内容
// 1.Es6之前const name = "why"const age = 18// const info = "my name is" + name +", age is " + age
//2.Es6之后
const info = ` ma name is ${name} ,age is ${age}`
1.2 标签字符串的详细使用
- 模版字符串还有另外一种用法:标签模版字符串(Targged Template Literals)
- 我们来看一个普通的JavaScript的函数
function foo(...args){console.log("参数",args)}
foo("why",18,1.88)
- 如果我们使用标签模版字符串,并且在调用的时候插入其他的变量
- 模版字符串被拆分了
- 第一个元素是数组,是被模块字符串拆分的字符串组合
- 后面的源塑胶是一个个模版字符串传入的内容
//2.标签模版字符串的用法
function foo(...args){console.log("参数",args)}
// foo("why",18,1.88)
//反引号也可以调用函数的 并且会将反引号里面的内容传入函数里面去foo`my name is ${name},age is ${age}`
说了这么多,听着是否有点抽象,但是后续在我们的React框架中会用到 (css in js)
如何将css写到js里面呢,我们会用到React的styled-components库
2.ES6函数的增强用法
- 在ES6之前,我们编写的函数参数是没有默认值的,所以我们在编写函数时,如果有下面的需求:
- 传入了参数,那么使用默认参数
- 没有传入参数,那么使用一个默认值
- 而在ES6中,我们允许给函数一个默认值:
2.1 函数默认值的补充
- 默认值也可以和函数解构一起来使用