模板字符串简介
ES6 引入了一种新型字符串字面量语法,称为模板字符串(template strings)。它使用反引号(`)替代普通单引号或双引号,在基础功能上与普通字符串无异,但提供了更便捷的高级应用。
基本用法
多行字符串与变量嵌入
模板字符串支持直接换行,无需拼接。若需输出反引号本身,需用反斜杠转义。
// 多行字符串
const multiline = `I like programming and play football.`;
// 变量嵌入
var name = "Evan", time = "today";
console.log(`Hello ${name}, What are you doing ${time}?`);
// Hello Evan, What are you doing today?
注意:大括号内可放入任意 JavaScript 表达式,包括运算和对象属性访问。
var x = 1, y = 2;
console.log(`${x} + ${y * 2} = ${x + y * 2}`); // "1 + 4 = 5"
var obj = {x: 1, y: 2};
console.log(`${obj.x + obj.y}`); // "3"
HTML 构建与 Trim
在处理 HTML 片段时,模板字符串能保留空格和缩进,便于阅读。如需去除首尾空白,可结合 trim 方法。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
函数调用与嵌套
模板字符串中可直接调用函数,也支持嵌套使用。

