ES5输出模板字符串
我们在之前的ES5中使用javascript输出模板字符串的方法，通常是下面这样。
例子：
<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = 'My name is <b>' + name + '</b> and my age is <font color="green">' + age + '</font>';
</script>
这样的做法需要使用大量的""（双引号）和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。
ES6输出模板字符串
现在使用ES6提供了模板字符串，具体写法如下
例子：
<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name is <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
模板字符串用`（反引号）标识，用${}将变量括起来。这样写出来就方便多了。
模板字符串中的反引号的使用
由于反引号是模版字符串的标识，如果我们需要在字符串中使用反引号，我们就需要对其进行转义。
例子：
<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
注意看上面例子中的区别，将name is 修改为了 name `s
模板字符串引用变量/引用表达式/引用方法
- 引用变量
看上面例子里面的name和age就是变量，在模板中使用了${}进行包围就可以实现了变量的引用。
- 引用表达式
例子：
<div id="string"></div>
<script type="text/javascript">
document.getElementById('string').innerHTML = `${ 1 + 2 }`
</script>
在${} 可以放置任意表达式
- 引用方法
<div id="string"></div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
function fun() {
return 'andmy age is';
}
document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> ${fun()} <font color="green">${age}</font>`
</script>
在${} 可以放置任意方法
模板字符串的多行使用
<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s
<b>${name}</b>
and my age is
<font color="green">${age}</font>`;
</script>
注意：如果使用模版字符串表示多行字符串，所有的空格和缩进都会被保存在输出中！！
模板字符串嵌套
<div id="string"></div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
const tmp = `My name is ${name} and my age is ${`${age}`}`;
document.getElementById('string').innerHTML = tmp;
</script>
模板编译
通过模板字符串，生成正式模板的实例
例子：
<div id="string"></div>
<script type="text/javascript">
let template = `<ul>
<% for(let i = 0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>`;
let parse = eval(compile(template));
document.getElementById('string').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
function compile(template){
const evalExpr = /<%=(.+?)%>/g;
const expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');
template = 'echo(`' + template + '`);';
let script =
`(function parse(data){
let output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
}
</script>
标签模板
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
例子：
<script type="text/javascript">
alert`王小端coder`;
</script>
