es6学习笔记之二 const，let和模版字符串

发表于   |   分类于   |  

这篇学习笔记依然是介绍es6的一些常用的新功能，这一篇会介绍两种新功能：1. const和let，2.模板字符串。之所以把这两个完全不相关的
概念放在一起是因为这两部分的内容不是很多，而且很容易理解。同时，我也会介绍一些其他es6相关的内容。

1. 一些概念

在开始我们的正篇之前，有几个概念需要大家牢记。es6的新功能分为两类，一类是真正的新增功能，另一类叫做语法糖，这两类虽然在代码中没什
么区别，但是实际上却完全不一样。真正的新增功能是指一个功能在以前没有，从这个版本开始加入的，比如Set和Map，const和let等。与这些
功能相比，语法糖指的是其实某个功能在以前的版本已经有了，但是写法很不友好，很不科学，所以为我们设计了新的写法，比如class关键字，虽
然看起来好像和java或者其他面向对象的写法很像，但是js里的class内部实现仍然靠的是原型链继承，和一般的面向对象编程的实现不一样，这
一点请务必牢记。

2.let和const

var关键字是javascript中定义函数的方法，要知道javascript在一开始设计的时候只是为了操作DOM，可是现在呢，javascript可以说无处
不在，我们有NodeJs，可以用javascript来编写服务器代码，或者react native，用javascript来写手机原生app，甚至是electron，可
以用来开发各平台的桌面应用。所以只有var这一种关键字定义函数明显已经不够用，而且var本身的设计也有缺陷，所以es6为我们带来了两种新的
关键字，作用就是用来取代var。

2.1 let

let几乎和var一样，唯一的区别就是let支持块级作用域，而且同名的函数不能定义两次，比如我们可以这样

1
2
var a = 1;
var a = 2;

但是我们不能这样，会报错
1
2
let a = 1;
let a = 2;

这些区别也正是我们应该用let代替var的理由，所以在以后的代码中，我们应该尽可能的使用let。

2.2 const

const的意思是常量，如果你接触过别的编程语言，对于这个概念一定不陌生，常量顾名思义就是不会变化的量，所以当我们确定一个变量在之后不会
被改变时，就要尽量使用const。这样做的好处是可以使代码逻辑更加清晰，如果你看到const，那么就应该意识到，这个变量在之后的使用过程中值
不会发生改变。一旦试图改变const就会报错

1
2
const a = 1;
a = 2; //这里会抛出异常

但是值得注意的是，如果用const定义了一个对象，那么我们可以改变这个变量上的属性，甚至可以为其增加新的属性，

1
2
3
4
const person = {name: 'john', age: 10}
person = {name: 'jane', age: 8}//这里会报错，因为试图直接改变对象
person.name = 'jane'; //不会报错
person.gender = 'female'//不会报错

3. 模板字符串

模板字符串是es6给我们带来的一个非常方便的功能，它可以使我们的string中插入javascript函数或者表达式。这使得我们不需要再去拼接字符串，
从而使得代码更加简洁，逻辑更加清晰。我们来看个例子：

拼接字符串的写法：

1
2
3
4
5
let firstName = 'Peter';
let lastName = 'Doe';

//现在我们需要输出 My name is Peter Doe
console.log('My name is '+firstName+' '+lastName);

模板字符串写法：

1
2
3
4
let firstName = 'Peter';
let lastName = 'Doe';

console.log(`My name is ${firstName} ${lastName}`);

是不是很方便？这里大概说一下，我们用`来替代字符串中的’或者”，然后在需要引入变量或者表达式时把它们包在${}中，这样就搞定了。下面我们再来
看两个表达式的例子：

1
2
3
4
5
let number = 2;

console.log(`Number X 2 is ${number*2}`);

console.log(`Today is ${new Date()}`);

但是值得注意的是，如果有大量的逻辑运算，那么请不要直接写到${}中，比如迭代或者if条件，这样会使代码变得不清晰。

这里我来介绍两个我用模板字符串比较多的情况，如果各位碰到这种情况，也可以考虑使用模板字符串。

1) 动态url，有的时候，我们写出一个url时，它其中的某个部分是变量，要等待我们执行了某些操作以后才能赋值，我觉的这就是一个使用模板字符串的
好时机，比如我们在点击一个按钮后会得到一个postId，那么我们就可以直接把这个postId放到模板字符串中

1
const url = `www.mycoolblog.com/post${postId}`;

2) 拼接sql数据库query，如果你用过php或者NodeJs，那么你一定能体会拼接query的痛苦，我们来看个简单的，如果用拼接字符串怎么写：

1
const query = "select name, age, gender from users where userId='"+userId+'" and userPassword='"+userPassword+"'";

怎么样，这个其实是最简单的查询，如果我们需要用到表连接或者其他的复杂逻辑，那么这个query就会变得异常复杂，而且我几乎可以肯定你会因为少了一个
‘或者”而导致代码报错。

我们再来看看用模板字符串可以怎么做：

1
const query = `select name, age, gender from users where userId='${userId}' and userPassword='${userPassword}'`;

怎么样，是不是再也不用担心引号的问题了呢？不管你的query逻辑有多复杂，只要使用模板字符串就可以完全避免引号带来的问题，是不是很方便。

4. 总结

今天简单的介绍了几个es6为我们带来的新功能，const和let，用来代替var，使变量声明更有逻辑性；以及模板字符串，使我们再也不用去拼接字符串了，
就像第一篇笔记说的，es6带来的新功能基本都是大家平时工作中最需要的功能，所以没有必要害怕es6，它只会让我们写js的时候更加方便，逻辑更加清晰。