ES6(7）—— 模板字符串

一、什么是模板？模板的基本写法。

可以理解为一个填空题。就是样式是写好的，然后给里面动态填充数据即可。

1、以前写模板的方式。

let title = '2018你好啊！';
var tpl = '<div>' +
    '<span>' + title + '</span>' +
'</div>';

//引号不能断行，断行会报错。运行的结果也没有空格的保留

运行结果如下：

2、ES6中写模板的方式。

let title = '2018你好啊！';
var tpl2 = `
<div>
    <span> ${title} </span>
</div>
`;

//用反引号引起来，内部就像写HTML一样。插入变量时，将变量写在${}的括号里面。运行结果空格会保留

运行结果如下：

3、模板的嵌套。

let title = '2018你好啊！';
var tpl2 = `
<div>
    <span> ${title +`
        <span>嵌套在内部的模板</span>
    `} </span>
</div>
`;

二、模板一些注意事项

1、如果我们用了ES6的模板，想要去掉换行，可以使用trim()方法消除。

但是JavaScript中本身没有提供trim()方法，可以自己去写trim()方法。jQuery里面是有trim()方法的。

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

var x = 1;
var y = 2;
var tpl = `
<div>
    <span>${x+y}</span>
</div>
`;
console.log(tpl);

结果展示:

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

function show(){
    return "Hello World!";
}
var tpl = `
<div>
    <span>${show()}</span>
</div>
`;
console.log(tpl);

结果展示：

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

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

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

7、如果需要引用模板字符串本身，可以像下面这样。

//方法一
let str = 'return' + '`hello ${name}!`';
let func = new Function('name',str);
console.log(func('Jack'));         //hello Jack!

//方法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null,str);
console.log(func('Jack'));     //hello Jack！

三、模板编译

一个模板字符串如何生成正式模板的呢？如何编译这个模板字符串。

1、要编译的模板字符串。

var template = `
<ul>
    <% for(var i=0; i<data.supplies.length; i++){ %>
        <li><%= data.supplies[i] %></li>
    <% }%>
</ul>
`;

2、如何编译（ES6第61页）

四、标签模板

（ES6第61页）