JavaScrip-模版字符串的详解

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)

• 如果我们使用标签模版字符串，并且在调用的时候插入其他的变量
  1. 模版字符串被拆分了
  2. 第一个元素是数组，是被模块字符串拆分的字符串组合
  3. 后面的源塑胶是一个个模版字符串传入的内容

//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 函数默认值的补充

• 默认值也可以和函数解构一起来使用