JavaScript模板字符串怎么用｜轻松拼接字符串教程

JavaScript模板字符串是ES6引入的革命性字符串语法，用反引号`包裹，不仅能轻松实现多行文本和变量、表达式（如三元运算、函数调用）的直观嵌入，还显著提升了代码可读性与安全性；但需谨记仅反引号有效、${}内只接受表达式而非语句、空白字符会被原样保留——这些看似细微的特性，恰恰决定了它在真实项目中是提升开发效率的利器，还是引发渲染异常和兼容性问题的隐患源头。

什么是 JavaScript 模板字符串

模板字符串（Template Literal）是 ES6 引入的字符串字面量语法，用反引号 ` 包裹，支持多行文本和嵌入表达式。它不是“增强版字符串拼接工具”，而是替代 + 和 String.prototype.concat() 的更安全、更可读的字符串构造方式。

怎么在模板字符串里插入变量和表达式

用 ${...} 语法插入任意 JavaScript 表达式，包括变量、函数调用、三元运算、甚至对象属性访问——只要能求值，就能放进去。

常见写法示例：

`Hello, ${name}`

`Sum: ${a + b}`

`Status: ${isActive ? 'online' : 'offline'}`

注意：${} 内部不能直接写语句（如 if、for），只能是表达式；若需复杂逻辑，应先赋值给变量再插入。

为什么不能把模板字符串当普通字符串用单引号或双引号

因为只有反引号 ` 才启用模板字符串特性。用 '${x}' 或 "${x}" 是字面量字符串，$ 和 {} 不会被解析，原样输出。

容易踩的坑：

• 复制粘贴时误把中文全角反引号 ｀ 当成英文反引号 `，导致语法错误
• 在不支持 ES6 的旧环境（如 IE）中运行，会直接报 SyntaxError: Unexpected token `
• 误以为 ${obj?.prop} 在所有环境都安全——可选链操作符需单独兼容性检查，不是模板字符串自带能力

模板字符串里的换行和空格怎么处理

反引号内保留所有空白字符，包括换行、缩进、制表符。这既是优势（方便写 HTML 片段），也是隐患（可能意外引入多余空格）。

实用建议：

• 写多行 HTML 时，用 .trim() 清除首尾空白：

  `
    <p>${text}</p>
  `.trim()

• 避免在 ${} 前后加多余空格，否则会出现在最终字符串里
• 若需动态控制缩进，不要依赖模板字符串内的空格，改用 String.prototype.repeat() 或显式拼接

真正难处理的从来不是语法，而是团队协作时对空白字符的预期不一致——有人删了换行，有人留着缩进，结果渲染出意料之外的空白节点。

今天关于《JavaScript模板字符串怎么用｜轻松拼接字符串教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！