JavaScript模板字符串变量嵌入教程

JavaScript模板字符串以反引号为标志，不仅支持多行文本和灵活的${expression}插值（可嵌入变量、运算、函数调用甚至实时计算），还天然适配HTML生成与配置文本等场景；但需警惕空格污染、语法误用（如混淆引号类型、遗漏括号或在非async函数中滥用await）以及高频拼接时的性能陷阱——它不是简单的“高级引号”，而是为表达力与实用性而生的现代字符串解决方案。

JavaScript 模板字符串不是“更高级的引号”，而是专为多行和变量插值设计的语法结构，用反引号 ` 包裹，内部用 ${expression} 嵌入任意表达式——不只是变量。

模板字符串的基本写法和变量嵌入

必须用反引号 `，单引号或双引号都不行；${...} 中可以是变量、函数调用、甚至简单运算，只要返回值能转成字符串即可。

• const name = "Alice"; console.log(`Hello, ${name}!`); → "Hello, Alice!"
• const x = 2; console.log(`Result: ${x * 3}`); → "Result: 6"
• console.log(`Time: ${new Date().toLocaleTimeString()}`); → 实时时间字符串

换行和缩进会原样保留，但要注意空格污染

模板字符串天然支持多行，换行符和缩进空格都会成为最终字符串的一部分。这在生成 HTML 或配置文本时很方便，但也容易因误加空格导致意外空白。

• 这样写会多出两行和大量空格：

  const html = `
    <p>Hello</p>
  `;

• 更干净的做法是把 ` 放在行首，用 .trim() 清理首尾空白：const html = `

  Hello

  `.trim();
• 或者用带标签的模板字符串（如 String.raw）控制转义，但普通场景不推荐过度复杂化

常见错误：${} 里写错东西或漏掉反引号

最常踩的坑是把模板字符串当普通字符串用，或者在 ${} 里放了未定义变量、异步操作（如 await）却没配合 async 函数。

• ❌ "Hello ${name}" —— 双引号，插值无效，输出字面量 "Hello ${name}"
• ❌ `${user.name.toUpperCase}` —— 少了括号，返回的是函数本身，不是调用结果
• ❌ `${await fetch(...)}` —— 在非 async 函数中直接写会报语法错误
• ✅ 正确姿势：async function f() { return `${(await fetch('/api')).status}`; }

真正难的不是语法，是判断什么时候该用模板字符串、什么时候该用 + 或 String.concat()：简单拼接两个变量用模板字符串没问题；高频循环中拼接大量字符串，反而可能因隐式类型转换拖慢性能——这时候老老实实用数组 push + join 更稳。

好了，本文到此结束，带大家了解了《JavaScript模板字符串变量嵌入教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！