ES6 模板字符串

模板字符串

模板字符串是ES6中非常重要的一个新特性，这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。简单来说，作用：简化字符串拼接。

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

 

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

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

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！