模板字符串、标签模板、扩展运算符

一、模板字符串（可以接受回车换行或空格(回车换行和空格最终可以体现到dom中)；变量的嵌入很方便）；
1.例如：

let titel = "哈哈";
let str = `<div>${title}</div>`;
let str1 = `<div>
 <p>${title}<p>
</div>`;

2.多行字符串可以用\n 换行，则在页面上自动显示换行。

let str = `i can do \n  you can `;

二、标签模板
含义：标签指的是函数名，模板指的是函数的实参（es6模板字符串形式的实参）
例如：

let a = 10;
let b = 5;
tag`${a*b}hello${a}world${a+b}`;
function tag(){
console.log(arguments);
}
// 等同于
// tag(["",hello,world,""],50,15)
// 结果输出
0:["",hello,world,""],
1:50,
2:10,
3:15

// 标签模板的第一个参数是一个数组，用来接收模板中的非变量部分
// 标签模板的第二个参数或后面的参数，用来接收模板中的变量部分

三、speard扩展运算符
spread运算符的表示是 ‘…’ 三个点表示
1.数组扩展运算符
例如：

let a = [1,2,4];
console.log(a);// 1 2 4

// 场景：函数的接受参数
// … 运算符在函数形参中出现，被认为是rest剩余参数运算符
// 所谓的剩余参数指的是，除了…前面的参数之外，所有的实参都存到args参数里，所以args参数是一个数组
// 剩余参数运算符应该出现在形参列表的末尾
// 当…运算符出现在函数形参中的时候，表示rest剩余参数运算符

例如：

let [x,...args] = [1,2,3,4,5];
console.log(x,args);
//x 1
// args [1,2,3,4]

2.对象扩展运算符
例如：

function mapState({ x = 0, y = 0 } = {}) {
			return {
				x,
				y,
			};
		}
let obj = {
     title:"哈哈"，
     ...mapState({x:1,y:2}),
}
console.log(obj)
//title:"哈哈"，
// x :1,
// y : 2

四、对象属性名简写
例如：

let a = 10;
let title = "哈啊哈";
let obj = {
   a,
   discuss:function(){
   console.log("嘿嘿");
   }
}
obj[title]= "哈哈";//title 表示一个表达式 哈啊哈：哈哈