JavaScript如何操作字符串_模板字符串你用好了吗

模板字符串需用反引号包裹，否则${}不生效；变量须已声明；支持换行与多层表达式但忌过度复杂；标签函数用于安全插值、国际化等；IE不支持，深层嵌套非法。

模板字符串里嵌入变量为什么没生效

常见现象是写成 `Hello ${name}` 却输出了字面量 Hello ${name}，根本原因是用了普通单引号或双引号，不是反引号 `。模板字符串必须用反引号包裹，否则大括号只是普通字符。

• ✅ 正确：`Hello ${name}`
• ❌ 错误："Hello ${name}" 或 'Hello ${name}'
• 变量 name 必须已声明且有值，未定义会显示 undefined
• 支持多层表达式，比如 ${items.length > 0 ? 'has items' : 'empty'}，但别塞太复杂的逻辑，可读性会崩

换行和缩进怎么保留又不破坏代码格式

模板字符串天然支持换行，但直接回车会导致 html 渲染出多余空格或换行符，js 逻辑中也可能干扰 trim 或比较。关键是区分「意图换行」和「为排版加的缩进」。

• 想保留换行：直接写 `line1nline2` 或用反引号内真实换行
• 想避免缩进污染：用 .replace(/s+$/gm, '') 去每行尾空格，或用 tagged template function 清理
• 常见坑：在 react JSX 中写 {`
  n textn

  `}，浏览器会把换行转成文本节点空格，建议用 whiteSpace: 'pre-wrap' 控制 css

标签模板函数（tagged template）到底用来干啥

不是炫技用的，典型场景是安全插值、国际化、sql 拼接防注入、CSS 动态生成。它的核心是函数接收两个参数：字符串数组（不含表达式部分）和表达式值数组。

`hello ${a} world ${b}`

传给函数 myTag 时，实际调用是：myTag(['hello ', ' world ', ''], a, b)。

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

• 做 HTML 转义：html`
  ${userInput}

  ` 内部对每个 userInput 做 escapeHTML()

• 做 i18n：t`Hello ${name}, you have ${count} messages`，函数查翻译表并替换占位符
• 注意：不要在 tag 函数里直接拼接 SQL，仍需绑定参数；node.js 的 pg 等驱动原生支持参数化，优先用它们

性能和兼容性还有哪些隐性代价

模板字符串本身性能没问题，V8 优化得很好，但滥用会带来间接成本。

• IE 完全不支持，哪怕 Babel 编译成 + 拼接，也会丢失换行和多行能力，得靠 String.raw 或正则补救
• 大量拼接长字符串（如生成千行 HTML）时，反复创建新字符串比 Array.join() 慢，尤其在旧引擎上
• 调试困难：错误堆栈里的模板字符串常被压缩成一行，变量名消失，chrome DevTools 里 hover 查看值比传统拼接更不直观

最常被忽略的是嵌套层级——三层以上插值（${${${x}}}）语法不合法，必须拆成中间变量。别为了“一行写完”牺牲可维护性。