ES6: 模板字符串和箭头函数的基本使用

前言

本文主要介绍了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对象，所以不能在内部使用它。