es6之模板字符串

es6出现之前，字符串的拼接特别麻烦，但自从有了es6之后，这一切问题都变得简单了。虽然之前也用过es6的模板字符串，但从来没有好好整理一下，现在整理笔记，也方便以后复习。

模板字符串用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。比如下面这样。

const name = 'Jelly';
const age = 25;
const sentence = `${name} is ${age} years old`;

在控制台打印出来是这样的

上面代码中的模板字符串，都是用反引号表示。并且，模板字符串中嵌入变量，需要将变量名写在${}之中。

还可以这样

const template = `
	<div class="red">
	<p>hello vue!</p>
	</div>
	`.trim();
	

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

也可以这样

let x = 1;
let y = 3;
let computed = `${x*2} + ${y} = ${x*2 + y}`;

let object = {x: 4, y: 8};
let use = `${object.x + object.y}`;

由上面可以看出，大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

除了这些之外，模板字符串还可以调用函数

function fn(){
		return `I Love You`;
	}

`I want to say ${fn()}`;
// I want to say I Love You

在上面的列子中，如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
注意，如果模板字符串中的变量没有声明，将报错。
当然，如果大括号内部就是一个字符串，那么，将会原样输出。
除了上面的几种常见用法之外，还有很多的其他用法，具体可以参考阮一峰的es6,比较详细。