前言
本文主要介绍了ES6中模板字符串和箭头函数的基本使用
一、模板字符串
1、基本介绍
- 由反引号``(在键盘Esc键的下面）圈住的字符串即模板字符串
- 举例：
//普通字符串
const name='hello'
console.log(name)
//模板字符串
const name1=`world`
console.log(name1)
结果：
2、模板字符串和一般字符串的区别
- 代码1：一般字符串的使用
使用一般字符串时，对字符串进行拼接时需要用到加号+
<script>
const person={
name:'June',
age:18,
sex:'male'
};
const info='我的名字是'+person.name+',性别：'+person.age;
console.log(info)
</script>
结果：
- 代码2：模板字符串的使用
使用模板字符串时，使用${}来注入模板字符串
<script>
const person={
name:'June',
age:18,
sex:'male'
};
const info= `我的名字是:${
person.name},性别:${
person.sex}`;
console.log(info)
</script>
结果：
3、模板字符串的注意事项
- 模板字符串中，所有的空格、换行或缩进都会被保留在输出之中
（1）普通字符串
通过转义字符来实现换行
<script>
const info='第一行\n第二行'
console.log(info)
</script>
结果：
（2）模板字符串
方法一：通过转义字符来实现换行
<script>
const info=`第一行\n第二行`
console.log(info)
</script>
结果：
方法二：通过换行实现换行效果
模板字符串中，可以通过直接换行来实现上述效果，不过所有的空格、换行或缩进都会被保留在输出之中
<script>
const info=`第一行
第二行`
console.log(info)
</script>
结果：
如果输出结果不想有空格，挪动一下要换行的文字内容：
结果：
- 输出 ` 和 \ 等特殊字符串
使用转义字符反斜杠对字符串进行转义，比如:
结果：
- 模板字符串的注入
（1）通过${}来实现对模板字符串的注入
（2）只要最终可以得出一个值的就可以通过${}注入到模板字符串中
举例
<script>
const username="June"
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);
</script>
结果：
二、箭头函数
1、基本介绍
- 箭头函数的结构：
const/let 函数名 = （参数）=>{函数体} - 举例：
const add =(x,y)=>{
return x+y;
};
console.log(add(2,2));
分析：
首先，参数和函数体之间由箭头=>连接；由于构成的函数是匿名函数，因此无法直接给箭头函数起名字，得将其赋给一个变量或者常量，变量名或常量名即函数名；接着就可以在其他地方通过调用函数名来调用函数了。
2、注意事项
- 单个参数可以省略圆括号
比如：
const add = x=>{
return x+1;
};
console.log(add(2));
- 无参数或者多个参数不能省略圆括号
比如：
const add = ()=>{
return 1+1;
};
console.log(add());
- 单行函数体可以同时省略{}和return
constadd=(x,y)=>x+y;
console.log(add(1, 1));
- 如果箭头函数返回单行对象,可以在{}外面加上(),让浏览器不再认为那是函数体的花括号，而是对象的花括号
const add = (x,y) => ({
value:x + y
});
console.log add((1, 1));
结果：
3、非箭头函数的this指向
（1）全局作用域中的this指向window
console.log(this); // window
结果：
（2）一般函数中的this指向
- 只有在函数调用的时候，this指向才确定；不调用的时候，不知道this指向谁
- this指向和函数在哪儿调用没关系，只和谁在调用有关
function add(){
console.log(this);
}
add();
结果：
4、箭头函数的this指向
- 箭头函数的this指向由它所在的作用域决定，而不是由函数的调用方式决定。箭头函数没有自己的this，它会捕获外部环境的this作为自己的this。所以，在箭头函数内部，this指向的是外部环境的this，而不是函数自身的this。
- 举例
const obj = {
num: 10,
fn: function() {
setTimeout(() => {
console.log(this.num);
}, 1000);
}
};
obj.fn(); // 输出10
分析：
在这个例子中，箭头函数作为setTimeout的回调函数，在调用时使用了外部环境obj的this，所以this指向obj，输出了10。如果改用普通的函数声明，则this指向setTimeout函数本身，无法访问obj对象中的num属性。
- 不适合箭头函数的场景
（1）作为构造函数
如果使用箭头函数来作为构造函数，当实例化构造函数的时候会报错。因为箭头函数没有this,而构造函数有，当实例化构造函数的时候，里面的this会指向
（2）需要this指向调用对象的时候
箭头函数没有自己的 this，它会使用其父作用域中的 this 值，从而出现一些意外的行为。
（3）需要使用arguments的时候
当需要在函数内部使用arguments关键字时，箭头函数也不适用。箭头函数没有自己的arguments对象，所以不能在内部使用它。