ES6-模板字符串-展开运算符

(掌握)模板字符串-标签模板字符串的用法和应用

字符串模板基本使用

• 在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）
• ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：
  • 首先，我们会使用 `` 符号来编写字符串，称之为模板字符串
  • 其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

//ES6之前的拼接
const name = "小余"
const age = 20

const info = "今天来的人是" + name + "他今年" + age + "岁了"
console.log(info)
//ES6之后的拼接(模板字符串)
const info = `今天来的人是${name}他今年${age}岁了`
console.log(info)

标签模板字符串使用

• 模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）
• 我们一起来看一个普通的JavaScript的函数：

function foo(...args){//不确定传入多少个参数，使用剩余参数
    console.log(args)
}

foo("Hello World")//[ 'Hello World' ]，是放到数组里面的

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

function foo(...args){
  console.log(args)
}
foo`小余今天抓到一只奇怪的小满`//可以使用模板字符串进行调用函数

标签模板字符串是 JavaScript 中一种新的字符串模板语法，用于将字符串和变量结合起来。它使用反引号（`）来标识字符串，并在字符串中使用 ${expression} 来插入变量。标签模板字符串可以更好地控制字符串插值的语法，并且可以使用函数来自定义字符串的构建过程。

const name = "小余"
const age = 20
function foo(...args){
  console.log(args)
}
//标签模板字符串的用法
foo`今天${name}，抓到一只等级为${age}的奇怪小满`
//这样在反引号内的会被进行分割，1.今天	2.${name}	3.抓到一只等级为	4.${age}	5.的奇怪小满
//一共分为了5块，3块是被模板字符串name跟age分开的句子，2块是name跟age模板字符串。根据这个我们就能够自己去进行自由拼接这5块内容，动态插入东西自由度会更高

React的styled-components库

标签模板字符串会用在这里，以后就会用到

all in js的思想，就是所有东西都写在js里面，包括了html in js，css in js ，js in js

而这些将东西写在js文件里面就是需要依赖styled-components这个react库