模板字符串
模板字符串是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!