ES6——模版字符串

ES6 引入的模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`string text line 1`

// 多行字符串
`string text line 1
string text line 2`

// 字符串中嵌入变量
let a = 1;
`This is ${a} !`		
//This is 1 !

如果在模板字符串中需要使用反引号，则前面要用反斜杠(\)转义。

`\`Yo\` World!`			
//`Yo` World!

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

let str = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>`;

console.log(str);					
//（注意这里有个换行）
//<ul>
//  <li>first</li>
//  <li>second</li>
//</ul>

如果你不想要这个换行，可以使用trim方法消除它。

let str = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>`;

console.log(str.trim());					
//<ul>
//  <li>first</li>
//  <li>second</li>
//</ul>

模板字符串中嵌入变量，需要将变量名写在${}之中。

let a = 1;
let str = `This is a ${a} !`;
console.log(str);				//This is a 1 !

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

let a = 1, b = 2;
`Result is ${a + b}`
//Result is 3

`Result is ${a + b * 3}`
//Result is 7

let obj = {a: 1, b: 2};
`Result is ${obj.a + obj.b}`
//Result is 3

模板字符串之中还能调用函数。

function fun(){
	return "Hello";
}
`${fun()} World!`
//Hello World!

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

`Hello ${a}!`			//报错

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}!`
//Hello World!