当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript模板字符串是什么？怎么嵌入变量和表达式？

JavaScript模板字符串是什么？怎么嵌入变量和表达式？

2026-01-25 08:37:35 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript模板字符串是什么？如何嵌入变量和表达式？》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

JavaScript模板字符串用反引号包裹，支持${}变量插值和原生多行，外层非反引号则插值失效；${}内仅限表达式，禁用语句；缩进空格被保留，可用trim()处理；标签函数如html...`可实现转义等高级功能。

javascript模板字符串是什么_如何嵌入变量和表达式？

JavaScript 模板字符串是用反引号 ` 包裹的字符串字面量，支持变量插值和多行文本，比单引号/双引号字符串更灵活。

模板字符串怎么写？基础语法和反引号位置

必须用反引号 `，不是单引号 ' 或双引号 "。一旦混用，就不是模板字符串，${...} 会直接当普通字符输出，不会求值。

常见错误现象：
- 写成 "Hello ${name}" → 报错或原样输出 ${name}
- 混用引号嵌套（如 `"nested"`）没问题，但外层必须是反引号

正确写法示例：

`Hello ${name}`

`Value: ${42 + 1}`

如何嵌入变量？${} 里只能放表达式，不能放语句

${} 是插值占位符，里面写的是 JavaScript 表达式，不是声明、不是语句。比如不能写 if、for、let，也不能只写一个变量名不带任何操作——虽然单纯变量名本身也是合法表达式，但容易误以为“赋值”或“声明”也能进。

${user.name} ✅ 可以，属性访问是表达式
${items.length > 0 ? 'yes' : 'no'} ✅ 三元运算符是表达式
${console.log('hi')} ⚠️ 虽然能运行，但副作用不推荐
${let x = 1} ❌ 语法错误，let 是声明语句
${function() {}} ❌ 函数声明语句不行；但 ${() => {}} ✅ 箭头函数表达式可以（不过一般也不这么用）

换行和空格怎么处理？缩进会原样保留

模板字符串里的换行、制表符、空格都会被保留，不像普通字符串需要 \n。这对生成 HTML 或 SQL 片段很友好，但也容易在渲染时多出意外空白。

常见问题：
- 在 JSX 中写多行模板字符串，缩进变成 DOM 中的空格
- 拼接 SQL 时，首行缩进导致 SELECT\n name 实际变成两行，某些数据库驱动可能报错

解决建议：

用 .trim() 去首尾空白：`\n hello\n`.trim()
用 .replace(/\s+/g, ' ') 压缩内部多余空格（慎用，可能破坏格式化需求）
把换行符放在插值外面，避免缩进污染：
```
`line1${value}
line2`
```

标签函数怎么用？不只是拼接，还能做转义、校验、国际化

模板字符串前面加一个函数名（如 html`${x}`），就触发“标签函数”调用。该函数接收两个参数：字符串数组（strings）和插值结果数组（values）。这是实现安全 HTML 渲染、SQL 参数化、i18n 的底层机制。

例如防 XSS 的简单 html 标签函数：

function html(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i] ?? '';
    const escaped = String(val).replace(/[&"']/g, c => ({
      '&': '&',
      '': '>',
      '"': '"',
      "'": '''
    }[c]));
    return acc + str + escaped;
  }, '');
}

使用：html`

Hello ${userInput}

` → 自动转义 userInput 中的危险字符。

注意：html 不是内置函数，必须自己定义或引入库（如 lit-html、hyperhtml）。直接写 html`...` 而没定义函数，会报 ReferenceError。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。