模板字符串是JavaScript原生字符串类型，用反引号`包裹，支持变量插值${}和多行；${}内仅限表达式，不可写语句；嵌套需保持反引号；变量须在当前作用域存在，否则静默为undefined。

模板字符串不是语法糖，是 JavaScript 原生支持的字符串字面量类型，用反引号 ` 包裹，核心能力是变量插值和多行支持。

怎么写模板字符串：必须用反引号，不能用单/双引号

只有 `（反引号）才能启用模板字符串功能。用 ' 或 " 写出的字符串，哪怕内容一模一样，也无法解析 ${...}。

常见错误现象：

• 写成 "Hello ${name}" → 输出原样文字，${name} 不被替换
• 复制粘贴时混入中文全角反引号 ｀ → 语法报错 Uncaught SyntaxError: Invalid or unexpected token

正确写法：

立即学习“Java免费学习笔记（深入）”；

`Hello ${name}`

变量插值：${} 里只能放表达式，不是语句

${...} 是占位符，里面填的是「表达式」，不是「语句」。能运行、有返回值的才算表达式。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 支持：变量名 ${count}、函数调用 ${getName()}、三元运算 ${age >= 18 ? 'adult' : 'minor'}、数组访问 ${items[0].id}
• ❌ 不支持：${let x = 1}（let 是声明语句）、${if (x) {...}}（if 是语句）、${return 42}

如果逻辑复杂，先算好结果再放进 ${}，别硬塞控制流。

嵌套模板字符串：可以，但要注意引号层级和可读性

模板字符串内部还能嵌套模板字符串，因为 ${...} 里允许任意表达式，包括另一个带 ` 的字符串。

例如生成 HTML 片段：

`<div class="user">
  <h2>${user.name}</h2>
  <p>${user.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</p>
</div>`

注意点：

• 内层模板字符串仍需用 `，不能偷懒换 "
• 嵌太多层容易眼花，建议提取成独立函数或使用模板引擎处理重度 HTML 拼接
• 没有编译期校验，拼错变量名或漏写 $ 会导致静默渲染为空字符串

最常被忽略的是作用域——${} 中的变量必须在当前执行上下文中可访问，闭包、异步回调里取不到外部临时变量时，插值会是 undefined，而不是报错。