模板字符串

1.模板字符串

const username1 = 'LiHao'; //一般字符串
const username2 = `LiHao`; //模板字符串  
console.log(username1,username2,username1 === username2) //LiHao LiHao true

2.模板字符串与一般字符串的区别

//一般字符串拼接
const person = {
	username :'LiHao',
    age:18,
    sex:'male'
};
const info = '我的名字是' + person.username + ',性别:' + person.sex + ',年龄:' + person.age;
console.log(info); //我的名字是LiHao，性别:male，年龄:18

//模板字符串
const info = `我的名字是${person.username},性别:${person.sex},年龄:${person.age}`;
console.log(info); //我的名字是LiHao，性别:male，年龄:18

当和其他东西一起使用的时候，使用模板字符串，方便注入

其他情况下使用模板字符串或一般字符串都可以

3.模板字符串的注意事项

3.1输入多行字符串

一般字符串

const info ='第一行 第二行'; 
console.log(info); // 第一行 第二行
const info ='第一行\n第二行'; //转义字符 \n  换行
console.log(info); // 第一行  
    //                第二行

模板字符串

//第一种写法
const info =`第一行\n第二行`; //转义字符 \n  换行
console.log(info); // 第一行  
    //                第二行

//第二种写法
const info ='第一行 
第二行'; // 直接换行
console.log(info); // 第一行  
    //                第二行

模板字符串中，所有的空格、换行或者缩进都会被保留在输出之中(你怎么写就怎么原样输出)

3.2输出 ` 和 \ 等特殊字符

const info = `\``; // \转义字符
console.log(info);  // `
const info = `\`\\`;
console.log(info);  // `\

3.3模板字符串的注入

const username = 'LiHao';
const person = {age:18,sex:'male'};
const getSex = function(sex){
    return sex === 'male'?'男':'女';
}
const info = `${username},${person.age + 2 },${getSex(person.sex)}`;
console.log(info); //LiHao, 20, 男 
// 可以调用函数 也可以运算 只要最终可以得出一个值的就可以通过${}注入到字符串模板中

4.什么是箭头函数

4.1认识箭头函数

//箭头函数写法
const add = (x,y) => {
    return x + y;
};
console.log(add(1,1)); // 2

4.2箭头函数的结构

const/let 函数名 参数 => 函数体

4.3如何将一般函数改写成箭头函数

//声明形式
function add() {}
//声明形式->函数表达式形式
const add = function () {};
const add = () => {

}

5.箭头函数的注意事项

5.1单个参数

//单个参数可以省略圆括号const add = x => {	return x + 1;};console.log(add(1)); //2//无参数参数和多个参所不可以省略圆括号const add = () => {	return 1 + 1;};console.log(add()); //2

5.2单行函数体

//单行函数体可以同时省略{} 和 returnconst add = (x,y) =>  x + y;console.log(add(1,1)); //2

多行函数体不能再简化了

5.3单行对象

 const add = (x,y) => {             return {                 value: x + y             };         };console.log(add(1,1));// {value:2}// 简写 const add = (x,y) =>({ value: x + y});       console.log(add(1,1));// {value:2}

6.非箭头函数的this指向

6.1全局作用域中的this指向

console.log(this); // window

6.2一般函数(非箭头函数)中的this指向

'use strict' //严格模式function add(){console.log(this);}//严格模式下指向undefinedadd();//undefined ->window(非严格模式)//只有在调用函数的时候this指向才能确定，不调用的时候，不知道指向谁//this指向和函数在哪儿调用没有的关系，只和谁调用有关const calc = {    add:add};calc.add();// 指向 calcconst adder = calc.add;adder();//undefined ->window(非严格模式)

 //构造函数function Person(username){	this.username = username;}const p = new Person('LiHao'); //指向的是实例化过后的 p(实例对象)

7.箭头函数的this指向

箭头函数没有自己的this

const cal = {	add:() => {		console.log(this);}};calc.add(); //window

8.不适用箭头函数的场景

8.1作为构造函数

8.2需要this指向调用对象的时候

document.onclick = function(){	console.log(this) //document}document.addEventListener('click'()=>{    console.log(this);//window},false);

8.3 需要使用arguments的时候

箭头函数中没有arguments

function add(){console.log(arguments);}add(1,2); //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]