JavaScript模板字符串使用${}嵌入变量和表达式，简单高效。

JavaScript模板字符串以反引号定义，通过${}语法安全、灵活地嵌入变量、对象属性、方法调用及任意合法表达式（如三元运算、算术计算），但严禁语句和未声明变量；支持自然嵌套、空值处理（推荐用??提供默认值），并严格保留原始值类型——null/undefined会转为对应字符串，Symbol等需显式转换，避免常见误区（如误用单/双引号导致插值失效）是写出清晰健壮模板的关键。

模板字符串里怎么写变量？用 ${} 包住变量名就行

模板字符串用反引号 ` 定义，变量必须写在 ${} 里面，不能只写 $var 或 ${var} 外面漏掉反引号——那根本不是模板字符串。

常见错误：把单引号或双引号当模板字符串用，比如 'Hello ${name}'，这时 ${name} 就是纯文本，不会解析。

• const name = 'Alice'; console.log(`Hello ${name}`); → 输出 Hello Alice
• const user = { age: 30 }; console.log(`Age: ${user.age}`); → 支持点语法取属性
• const items = ['a', 'b']; console.log(`Count: ${items.length}`); → 支持方法调用和属性访问

表达式可以放进去吗？可以，但得是合法的 JS 表达式

${} 里面不是只能写变量，任何能返回值的表达式都行，比如三元运算、函数调用、甚至简单算术。但注意：不能有语句（如 if、for、let），也不能有未声明的变量引用。

• const x = 5; console.log(`Result: ${x > 3 ? 'big' : 'small'}`);
• console.log(`Uppercase: ${'hello'.toUpperCase()}`);
• console.log(`Sum: ${2 + 3 * 4}`);
• ❌ 错误：${let y = 1}（let 是声明语句，非法）
• ❌ 错误：${console.log('hi')}（虽然语法合法，但副作用容易被忽略，不推荐）

嵌套模板字符串？直接写，不需要额外转义

模板字符串支持嵌套，只要外层用反引号，内层也用反引号即可，不用像普通字符串那样拼接或转义。

const theme = 'dark';
const html = `<h2>${theme === 'dark' ? `Night mode` : `Day mode`}</h2><p>Settings: <code>${`theme=${theme}`}</code></p>`;

注意：嵌套时仍要确保每个 ${} 内部是完整表达式；如果逻辑复杂，建议先赋值给变量再插入，避免可读性崩坏。

空值或 undefined 怎么处理？会自动转成字符串 "undefined"

如果变量是 null 或 undefined，${null} 会变成字符串 "null"，${undefined} 变成 "undefined"，不是空字符串。

• 想默认为空字符串？加空值合并操作符：${value ?? ''}
• 想默认为某值？${user.name ?? 'Anonymous'}
• 想过滤 falsy 值（包括 0、false）？小心，${user.count || 'N/A'} 会让 0 也被替换成 'N/A'

真正容易被忽略的是：模板字符串本身不会做类型转换或容错，它只是字符串插值——值是什么，就转成什么字符串，连 Symbol 都会报 TypeError，除非显式调用 .toString()。

今天关于《JavaScript模板字符串使用${}嵌入变量和表达式，简单高效。》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！