模板字符串是JavaScript中用反引号包裹、支持表达式插值、多行书写和标签函数的字符串语法,相比传统拼接更安全、清晰、易维护,且无运行时性能劣势。

模板字符串是 JavaScript 中用反引号(`)包裹的字符串,支持嵌入表达式、多行书写和字符串插值。它不是“更好”的替代品,而是在特定场景下更自然、更安全、更易维护的工具。
支持变量插值,不用拼接
普通字符串要用加号或 concat 拼接变量,容易出错且可读性差:
const name = '小明'; const age = 25;const msg = '你好,' + name + ',你今年' + age + '岁了。'
模板字符串直接用 ${} 插入表达式,结构清晰:
const msg = `你好,${name},你今年${age}岁了。`
立即学习“Java免费学习笔记(深入)”;
还能放任意表达式,比如:
${age >= 18 ? '成年人' : '未成年人'}${name.toUpperCase()}${items.length > 0 ? items.join(', ') : '暂无'}
天然支持多行,无需换行符或连接符
普通字符串换行必须用 \n 或加号折行,写法生硬:
' + text + 'const html = '
模板字符串直接回车换行,HTML 或 SQL 等结构化内容一目了然:
${text}const html = `
缩进空格也会原样保留(注意:这是特性,不是 bug),适合生成带格式的内容。
支持标签函数,实现字符串预处理
模板字符串可以配合自定义标签函数,实现转义、国际化、SQL 参数化等逻辑:
function safe(strs, ...vals) {
return strs.map((s, i) => s + (vals[i] ? escapeHtml(vals[i]) : '')).join('');
}
const user = '';
const output = safe`
常见标签如 String.raw(禁用转义)、styled-components 的 CSS 解析、graphql 的查询解析,都依赖这个机制。
没有运行时性能劣势,现代引擎已优化
有人担心模板字符串比字面量慢,其实只要不滥用动态表达式,V8、SpiderMonkey 等引擎对纯静态模板(如 `hello ${'world'}`)做了常量折叠,最终生成的代码和普通字符串无异。
真正影响性能的是表达式本身的复杂度,而不是语法形式。日常开发中,可读性和安全性远比微秒级差异重要。










