现代 JavaScript 教程精解：反引号与 `${...}` 字符串插值——从“字符串的反引号“练习题看模板字面量机制-北京尧图网络

文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载导读本文以 zh.javascript.info现代 JavaScript 教程数据类型章节中的字符串的反引号练习题task.md 与 solution.md为主线系统剖析 JavaScript 三种引号的差异重点讲解反引号模板字面量中${...}的表达式嵌入机制。读完本文你将能准确预判任意${...}插值代码的输出结果理解字符串字面量与变量引用在插值中的本质区别并掌握算术表达式、函数调用、多行文本等进阶用法为后续学习字符串章节打下坚实基础。一、题目回顾一道考察输出结果的经典练习题在 02-first-steps/05-types数据类型章节中1-string-quotes 练习题给出了如下脚本要求回答三次alert调用分别会输出什么let name Ilya; alert( hello ${1} ); // ? alert( hello ${name} ); // ? alert( hello ${name} ); // ?这道题importance 标记为 5属于重点题目看似简单实则同时考察三个层面的知识是否知道反引号与单引号、双引号在语法能力上的差异是否理解${...}内部是一段会被求值evaluate的表达式能否区分字符串字面量name与变量name在插值语法中的不同含义。官方解答solution.md给出的核心结论只有一句话反引号将包装在${...}中的表达式嵌入到了字符串。但这句结论背后是整个 JavaScript 字符串类型中模板字面量template literal机制的缩影。下面逐层展开。二、三种引号string 类型的基础语法形态在 JavaScript 中字符串必须被括在引号里且一共有三种写法见 article.md 的 String 类型小节let str Hello; // 1. 双引号 let str2 Single quotes; // 2. 单引号 let phrase can embed another ${str}; // 3. 反引号其中双引号和单引号都是简单引号在 JavaScript 中两者几乎没有任何差别日常使用更多是风格偏好问题。而反引号是功能扩展引号它额外提供了两项能力表达式嵌入通过${…}将变量或表达式插入字符串多行字符串字符串内容可以直接跨行书写详见 05-data-types/03-string 章节。因此当我们在代码里看到反引号时应当立刻意识到这里的字符串可能不只是静态文本其中可能包裹着会被求值的表达式。三、逐行拆解三个alert分别输出什么第 1 行alert(hello ${1})→hello 1alert( hello ${1} ); // hello 1${1}中包裹的是一个数字字面量1。插值机制会先对${...}内部求值得到数字1再把求值结果转换为字符串并拼接到hello之后。因此输出为hello 1。这一行验证了插值的基本流程求值 → 转字符串 → 拼接。${1}与直接写hello 1在结果上是等价的数字1被隐式转换为字符串1。第 2 行alert(hello ${name})→hello namealert( hello ${name} ); // hello name${name}中包裹的是一个字符串字面量name。求值结果就是字符串name本身注意这里没有引号拼接到hello之后得到hello name。这一行是本题最容易出错的地方很多初学者会误以为${name}输出的是变量name的值即Ilya但实际上name是一段独立的字符串字面量表达式它的求值结果就是文本name与任何变量无关。第 3 行alert(hello ${name})→hello Ilyaalert( hello ${name} ); // hello Ilya${name}中包裹的是一个变量引用。插值时会读取变量name当前的值——由于脚本第一行已声明let name Ilya因此求值结果是Ilya最终输出hello Ilya。这一行展示了插值最常见的实战场景把变量动态地拼进字符串其效果相当于模板字符串技术出现之前的字符串拼接写法hello name。四、关键辨析${name}与${name}的本质区别将三行输出放在一起对比规律一目了然插值写法内部表达式类型求值结果最终输出${1}数字字面量1hello 1${name}字符串字面量name去引号后的文本hello name${name}变量引用变量name的值Ilyahello Ilya核心结论可以凝练为一句话${...}内部是一段真正的 JavaScript 表达式它是什么、求值结果是什么输出就是什么。引号是字面量语法的组成部分但输出时不会保留而裸写的标识符如name则被当作变量解析输出其当前值。这与原文档 solution.md 的官方讲解完全一致也与 article.md 中${…}内的表达式会被计算计算结果会成为字符串的一部分的表述互相印证。五、为什么只有反引号支持插值一个常被忽略的细节是表达式嵌入仅对反引号有效单引号和双引号都没有这项能力。官方文档用下面这段代码做了直接演示alert( the result is ${1 2} ); // the result is ${1 2}使用双引号则不会计算 ${…} 中的内容当使用双引号时${1 2}会被当成普通文本原样输出而不会被求值。单引号同理。这是因为双引号与单引号诞生于语言早期彼时并不存在插值能力反引号模板字面量是 ES6 之后加入的语法因此在设计上天然支持表达式嵌入与多行文本参见 05-data-types/03-string 章节对引号历史的说明。实战启示如果只是想写静态字符串三种引号可以随意选择但只要字符串中包含需要动态计算的片段就必须使用反引号 ${...}。六、插值表达式的能力边界远不止字面量与变量理解了${...}是任意表达式之后就可以举一反三。官方文档与仓库教程明确给出可以在${...}内放置任何东西——变量、算术表达式以及其他更复杂的结构。下面是在本仓库中可以找到的几种典型用法。1. 算术表达式alert( the result is ${1 2} ); // the result is 3出自 02-first-steps/05-types/article.md2. 函数调用function sum(a, b) { return a b; } alert(1 2 ${sum(1, 2)}.); // 1 2 3.出自 05-data-types/03-string/article.md3. 多行字符串反引号允许字符串直接跨行无需使用\n转义let guestList Guests: * John * Pete * Mary ; alert(guestList); // 客人清单多行出自 05-data-types/03-string/article.md4. 嵌套属性访问插值表达式中可以使用任意合法的 JavaScript 表达式例如user.name、三元表达式、数组索引等——只要是表达式求值规则与在alert(...)或赋值语句中完全一致。注意单引号和双引号若要实现跨行只能依赖\n换行符例如Guests:\n * John直接在其中敲回车则会报Unexpected token ILLEGAL语法错误详见仓库示例。七、进阶补充模板字面量的其他能力${...}只是模板字面量template literal的一部分。在深入学习时还可以关注两点标签模板tagged templates语法为func\string函数func 会被自动调用接收字符串片段与嵌入式表达式并加以处理可用于自定义模板引擎或字符串包装但日常使用频率较低官方说明见此处。字符串比较与字符访问字符串按 UTF-16 编码存储可通过str[0]、str.length等访问05-data-types/03-string 章节有完整讲解。这属于插值之外的话题可作为后续学习方向。八、总结与速查回到这道练习题本身最终的完整答案是let name Ilya; alert( hello ${1} ); // hello 1 alert( hello ${name} ); // hello name alert( hello ${name} ); // hello Ilya三个必须记住的要点反引号是唯一支持${...}插值的引号单引号与双引号只能原样输出文本${...}内是会被求值的表达式字面量求值后按字面输出变量则输出其当前值输出时字符串字面量的引号会被剥掉——${name}输出name而不是name更不是变量name的值Ilya。理解这一机制后你在阅读任何包含反引号的 JavaScript 代码从日志拼接、URL 构造到模板渲染时都能快速、准确地判断其输出结果。想要继续深挖字符串的完整能力长度、切片、查找、大小写、Unicode 等可以继续阅读本仓库的字符串章节并在数据类型总览中回顾string类型在整个 JavaScript 类型体系中的位置。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript 字符串引号全解析从三种引号到反引号 ${...} 模板插值Modern JavaScript Tutorial 实战JavaScript 字符串引号全解析从三种引号到反引号 ${...} 模板插值Modern JavaScript Tutorial 实战字符串是 Ja文档/教程前端freeCodeCamp JavaScript 基础教程精读用反斜杠\转义字符串中的字面引号freeCodeCamp JavaScript 基础教程精读用反斜杠\转义字符串中的字面引号本指南以 freeCodeCamp 开源课程《Basic J前端后端教育JavaScript 字符串引号与模板插值从 Modern JavaScript Tutorial 的 String quotes 任务理解 ${} 机制JavaScript 字符串引号与模板插值从 Modern JavaScript Tutorial 的 String quotes 任务理解 ${} 机制在文档/教程前端上一篇GraphQL-Prisma-TypeScript项目架构解析从零到一构建完整Airbnb系统下一篇VPS Fusion Monster Server Test Script跨平台编译指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

现代 JavaScript 教程精解：反引号与 `${...}` 字符串插值——从“字符串的反引号“练习题看模板字面量机制

相关推荐

learnxinyminutes-docs 实战：15 分钟上手 Emacs Lisp——从 sexp 求值到 buffer 文本处理

MuPDF C 编码风格指南：命名、缩进与引用计数规则解析

在 Gobot 中使用 Intel Curie 内置 IMU：从固件烧录到 Arduino 101 / TinyTILE 传感器编程实战

更多资讯

（论文速读）LogSAD：无需训练的结构异常与逻辑异常统一检测

Psychol Med：有抑郁症状的老年人中结构-功能连接耦合的改变

PDF 论文处理器 — 优势与功能文档

图数据库系列 · 第 04 篇部署实操：内网集群落地

图数据库系列 · 第 05 篇选型对比：图库与相邻方案

clip 数据驱动尺寸映射指南：使用 measure-map 的 linear 映射为散点图点大小绑定输入数据

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？