JavaScript原生提供模板字符串(反引号包裹,支持${expression}插值),可嵌入变量、表达式、函数调用、多行文本及HTML片段,并可通过标签函数实现转义等高级功能。

JavaScript 本身没有内置的“模板引擎”,但提供了原生支持——模板字符串(Template Literals),它用反引号 ` 包裹,支持嵌入表达式和多行文本,是轻量级、开箱即用的模板方案。
模板字符串的基本写法
用反引号定义字符串,内部用 ${expression} 插入变量或表达式:
const name = "小明";
const age = 25;
const msg = `你好,我是${name},今年${age}岁。`;
console.log(msg); // 你好,我是小明,今年25岁。
模板字符串支持复杂表达式和函数调用
大括号内不限于变量,可以是任意合法 JavaScript 表达式:
- 数学运算:
${a + b * 2} - 三元判断:
${score >= 60 ? '及格' : '不及格'} - 函数调用:
${getName().toUpperCase()} - 对象属性访问:
${user.profile?.avatar || 'default.png'}
多行字符串与HTML片段拼接
模板字符串天然支持换行,适合生成 HTML 或配置文本:
立即学习“Java免费学习笔记(深入)”;
const list = ['苹果', '香蕉', '橙子'];
const html = `
- \n ${list.map(item => `
- ${item} `).join('')}\n
// 输出带缩进的HTML字符串(注意:浏览器会自动忽略多余空白)
简单自定义模板函数(标签模板)
通过“标签函数”可实现更高级控制,比如转义、国际化或预编译:
function escape(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ?? '';
return acc + str + String(val).replace(/&/g, '&').replace(/
}, '');
}
const user = '';
const safeHtml = escape`${user}`; //










