JavaScript Academy · 课时

字符串插值基础

Q: 「字符串插值基础」这节课中我会学到什么？

在模板字面量中嵌入表达式。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在模板字面量中嵌入表达式。

字符串插值基础 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是模板字符串

模板字符串是一种使用反引号而不是引号来创建字符串的方式。它允许您直接在字符串中嵌入表达式，而不必手动进行字符串拼接。

占位符由美元符号后跟包围表达式的花括号构成。JavaScript 会计算这个表达式，并将其值插入字符串。

const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)

插值语法

在模板字符串中，您可以将表达式放在左花括号和右花括号之间。表达式会被计算并转换为字符串。

下面的示例使用普通拼接来产生与插值相同的结果，因此无需展示模板字符串语法也能说明这一概念。

const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)

插值为何有帮助

当您混合使用许多变量和字面文本时，使用加号运算符进行拼接会变得难以阅读。插值可以保留周围的文本，只替换其中的动态部分。

减少加号运算符
避免多余的空格错误
意图更加清晰

const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")

嵌入任意表达式

占位符可以包含任意有效表达式，而不仅仅是变量。算术运算、函数调用和属性访问都可以使用。

const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))

在其中调用函数

您可以调用函数，并让它返回的值进入字符串。示例展示了等效的拼接形式。

function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))

属性访问

您可以直接在占位符中读取对象属性。这里我们从用户对象中读取字段。

const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)

数字会变成字符串

当数字进入字符串上下文时，会自动转换为文本形式。插值也会发生同样的强制转换。

const total = 19.99
console.log("Total: $" + total)

占位符中的三元运算

三元运算符可以放入占位符中的条件逻辑，让您能够内联地在两个值之间进行选择。

const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)

嵌套表达式

占位符可以包含方法链和嵌套调用。表达式计算出的结果都会被插入。

const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)

混合使用多个值

当一个句子需要串联多个变量时，模板字符串非常实用。请将易读的插值版本（文字描述中介绍）与这个拼接后的等效版本进行比较。

const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)

转义美元符号

如果您希望将美元符号和花括号的组合按普通文本显示，而不是作为占位符，那么在模板字符串中可以使用反斜杠转义美元符号。在普通字符串中则不需要转义。

const text = "Use $\{x\} for a placeholder"
console.log(text)

快速检查

检验您对插值的理解。

回顾

回顾：模板字符串使用反引号和占位符将表达式嵌入字符串。

占位符可以计算任意表达式
值会被强制转换为字符串
插值比冗长的字符串拼接更清晰
转义美元符号即可按字面显示它

const n = "World"
console.log("Hello, " + n + "!")

常见问题解答

「字符串插值基础」课时是免费的吗？

是的 — 「字符串插值基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「字符串插值基础」这节课中我会学到什么？

在模板字面量中嵌入表达式。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「字符串插值基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy