ES6 学习 -- 字符串模板

ES5及以前，动态操作dom结构时，要多个字符串和变量拼接，如果不换行处理，则需要写很长的代码，不利于阅读理解，如果进行换行写入，则需要一堆的"+"号来连接文本与变量，写起来非常麻烦，如下：
var html = "<div>" + my.name + "</div>";

如果有很多个标签，那么需要很多次拼接，写起来很麻烦，并且结构复杂非常臃肿

而在ES6中，通过模板字符串，可以简单快捷的拼接字符串与变量，还可以实现换行写入，且标签的层级结构跟HTML一样，也非常清楚，如下：
let name = 'bob';
let html = `
<div>
　　<h1>好久不见</h1>
　　<span>${name}</span>
</div>

`; 

**使用反引号``将需要拼接的字符串写在反引号里面，而其中的变量通过${}来引入变量即可，且在反引号的里面还可以继续使用反引号，写入其他的字符串模板，如下：

let hello = "I miss you";
let html1 = `
<div>
　　<h1>好久不见</h1>
　　<div>
　　　　`<p>${hello}</p>`
　　</div>
</div>
`;

转载于:https://www.cnblogs.com/secretAngel/p/9699555.html