javascript模板字符串是es6引入的用反引号包裹的新语法,支持变量插值(${})、多行书写、免转义单双引号,并可配合标签函数实现转义、国际化等高级处理。

JavaScript 的模板字符串(Template Literals)是 ES6 引入的一种新语法,用反引号 ` 包裹,支持嵌入表达式、多行书写和字符串插值。它让字符串操作更直观、灵活,大幅减少拼接和转义的麻烦。
支持变量插值,告别加号拼接
传统字符串拼接容易出错,尤其混用变量和文本时:
// 旧写法const name = '小明'; const age = 25;const msg = '你好,' + name + ',你今年' + age + '岁了。';
模板字符串直接在 ${} 中写表达式,可读性高、不易漏空格或引号:
// 新写法const msg = `你好,${name},你今年${age}岁了。`;
- 变量、函数调用、运算表达式都可放在
${}里,比如${age > 18 ? '成年人' : '未成年人'} - 不需要转义单/双引号,内部可自由使用
"或'
天然支持多行字符串
以前换行得靠 + 拼接或 \n,既难看又易错:
立即学习“Java免费学习笔记(深入)”;
// 旧写法const html = '<div>\n <p>标题</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/745" title="What-the-Diff"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6dc516822a519.png" alt="What-the-Diff" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/745" title="What-the-Diff">What-the-Diff</a>
<p>检查请求差异,自动生成更改描述</p>
</div>
<a href="/ai/745" title="What-the-Diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>\n <p>内容</p>\n</div>';
模板字符串保留原始换行和缩进,HTML 或 SQL 片段写起来非常自然:
// 新写法const html = `<div>
<br><code> <p>标题</p> <p>内容</p>










