freamarker 模板中空格_ES6模板字符串详细介绍

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

在ES6之前，我们输出模板通常是这种方式：

$('#result').append( 'I am ' + web.name + '' + 'I`m ' + web.year + ' years old');

这种方式，经常会有引号、加号多或者少的问题出现。写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题:

$('#result').append(` I am ${web.name}  I`m ${web.year} years old`);

这种写法是不是看起来更舒服？

模板字符串技巧

1、模板字符串(template string)是增强版的字符串，用反引号(`)标识。 2、模板字符串中嵌入变量，需要将变量名写在${}之中。 3、如果模板字符串需要使用反引号，则前面要用反斜杠转义。 4、如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，如果你不想要这个空格和缩进，可以使用trim方法消除它。

$('#result').append(` I am ${web.name}  I`m ${web.year} years old`.trim());

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

let x = 1;let y = 2;`${x} + ${y} = ${x + y}`// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`// "1 + 4 = 5"let obj = {x: 1, y: 2};`${obj.x + obj.y}`// "3"

6、模板字符串之中能调用函数

function fn() { return "web秀";}`I am ${fn()}`// "I am web秀"let func = (name) => `Hello ${name}!`;func('web秀') // "Hello web秀!"

7、模板字符串之中嵌套赋值模板

let data = [{ id: 1, name: 'NO_' + 1},{ id: 2, name: 'NO_' + 2}]const tmpl = addrs => ` 

${addr.id}

${addr.name}

`;console.log(tmpl(data));//

1

NO_1

2

NO_2

8、模板字符串中的变量必须声明，否则报错。

// 变量place没有声明let msg = `Hello, ${name}`;// error: VM7585:2 Uncaught ReferenceError: name is not defined

公告

为了感谢大家一直以来的支持，小编发起了抽奖活动，大家可以去参与，转发抽奖活动和关注小编即可参与，抽出5名小伙伴每人20元话费奖励。再次感谢大家的支持。