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

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

发布时间 - 2026-01-11 00:00:00 点击率：次

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

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。

# javascript # java # html # js # 常见问题 # 字符串数组 # red

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：VSCode多语言支持：国际化扩展的开发与配置

下一篇：VSCode代码重构工具与质量保证的最佳实践

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：VSCode多语言支持：国际化扩展的开发与配置

下一篇：VSCode代码重构工具与质量保证的最佳实践