模板字符串

ES6为我们提供了模板字符串，语法使用反引号``。模板字符串具有以下三个优点：

1. 多行文本
2. 字符串中插入变量
3. 字符串中插入表达式

基本语法

---

// ES5
var name1 = 'javascript';
console.log(name1);
//输出：javascript

// ES6
let name2 = `ES6`;//是反引号``
console.log(name2);
//输出：ES6

多行文本

---

ES5

//ES5
var str1 = '<div>'
+ '<div>javascrip多行输出</div>'
+ '</div>';
console.log(str1);//输出：<div><div>javascrip多行输出</div></div>

var str2 = '<div><div>javascrip多行输出</div></div>';
console.log(str2);//输出：<div><div>javascrip多行输出</div></div>

ES6

//ES6
let str3 = `<div>
    <div>javascrip多行输出</div>
</div>`;
console.log(str3);

/*
输出：
<div>
    <div>javascrip多行输出</div>
</div>
*/

可以插入变量或表达式

---

// ES5
var name3 = 'ES5';
var age1 = 24;
var info1 = 'my name is ' + name3 + ' , age is ' + age1 + '.';
console.log(info1);//my name is ES5 , age is 24.

ES6的模板字符串实现起来就容易好多。关键语法${}，其中可以插入任何的 js 表达式。

//ES6
let name4 = 'ES6';
let age2 = 24;
let info2 = `my name is ${name4}, my age is ${age2}. ten years later ${age2 + 10}!`;
console.log(info2);//my name is ES6, my age is 24. ten years later 34!!

---

引用模板字符串本身

// 写法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy');    // "Hello Amy!"
 
// 写法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy');    // "Hello Amy!

---

有没有觉得方便了很多呢