模板字面量与可选链
使用模板字面量在字符串中嵌入表达式，使用 ?. 安全访问嵌套属性，并使用空值合并运算符 ?? 提前短路。
模板字面量与可选链 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
模板字面量：反引号字符串
模板字面量（反引号字符串）支持多行字符串和嵌入式表达式。它们用更清晰的方式替代了使用 + 进行的字符串拼接。
// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';
// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;多行模板字面量
模板字面量会保留换行和缩进。不再需要 \n，也不再需要跨多行拼接字符串。
const html = `
<div class="card">
<h2>${title}</h2>
<p>${body}</p>
</div>
`;
const sql = `
SELECT *
FROM users
WHERE age > ${minAge}
ORDER BY name
`;模板字面量中的表达式
任何 JavaScript 表达式都可以放入 ${} 中，包括三元表达式、函数调用、算术运算和方法调用。
const tax = 0.2;
const price = 50;
const receipt = `
Subtotal: $${price}
Tax (${tax * 100}%): $${price * tax}
Total: $${price * (1 + tax)}
${isPaid ? 'PAID' : 'UNPAID'}
`;带标签的模板字面量
带标签的模板会调用一个函数，并将字符串片段和插入的值作为参数传入。styled-components、GraphQL（gql``）和 sql`` 等库会使用它来安全地构建查询。
function highlight(strings, ...values) {
return strings.reduce((acc, str, i) =>
acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;可选链：?.
如果左侧为 null 或 undefined，可选链运算符 ?. 会短路并返回 undefined，而不会抛出 TypeError。它可以消除防御性的空值检查。
const user = null;
// Without optional chaining (throws TypeError):
// user.profile.avatar
// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error可选方法调用
obj?.method() 只有在 obj 不为 null/undefined 时才会调用该方法。如果 obj 为 null，它会返回 undefined，而不会抛出错误。
const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists
// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null空值合并：??
空值合并运算符 ?? 只有在左侧为 null 或 undefined 时才会返回右侧的值（而不是在左侧为假值时返回）。与 || 不同，它不会将 0 或 '' 视为空值。
const port = config.port ?? 3000; // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';
// Compare with ||:
console.log(0 ?? 'default'); // 0 (not nullish)
console.log(0 || 'default'); // 'default' (falsy!)空值赋值：??=
a ??= b 只有在 a 为 null 或 undefined 时，才会将 b 赋给 a。它是 a = a ?? b 的简写形式。它适合在有条件地初始化对象属性时使用。
let cache = {};
function getUser(id) {
cache[id] ??= fetchUser(id); // only fetch if not cached
return cache[id];
}逻辑赋值运算符
&&= 只有在左侧为真值时才会赋值。||= 只有在左侧为假值时才会赋值。结合 ??= 使用时，这些运算符可以让条件赋值更加简洁。
user.name ||= 'Anonymous'; // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists结合使用 ?. 与 ??
请结合可选链和空值合并，在提供默认值的同时安全地访问属性。
const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;您需要了解的字符串方法
常用的字符串方法包括：trim()、trimStart()、trimEnd()、padStart()、padEnd()、startsWith()、endsWith()、includes()、replaceAll()、at()。
const str = ' Hello World ';
str.trim(); // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1); // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'快速检查
如果 obj 为 null，const val = obj?.foo?.bar ?? 'default' 会返回什么？
回顾：模板字面量与可选链
反引号字符串支持表达式和多行内容。带标签的模板可以实现领域专用语言。?. 可以在不进行空值检查的情况下安全访问属性。?? 会在值为 null/undefined 时提供默认值，而不仅仅是在值为假值时提供默认值。将它们结合起来，可以安全、易读地访问数据并提供默认值。
常见问题解答
「模板字面量与可选链」课时是免费的吗？
是的 — 「模板字面量与可选链」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「模板字面量与可选链」这节课中我会学到什么？
使用模板字面量在字符串中嵌入表达式，使用 ?. 安全访问嵌套属性，并使用空值合并运算符 ?? 提前短路。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「模板字面量与可选链」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。