前端Wiki/JavaScript/深入/ES6+ 与工程基础

模板字符串与新语法

模板字符串用反引号 ` 包裹，两大能力：${表达式} 内嵌任意 JS 表达式（变量、运算、函数调用都行），以及原生支持多行——拼接 HTML 片段时不再需要一堆加号和 \n。

顺带掌握几个高频新语法：展开运算符 ...（复制合并数组对象、收集参数）、可选链 ?.（安全取深层属性）、空值合并 ??（只兜底 null/undefined）、Object shorthand（{ name } 等价于 { name: name }）。

注意一个细节：模板字符串里的 ${ 是固定语法，想输出「美元符号加大括号」本身时需要转义；在 Vue/React 里写模板时同样如此，这也是很多报错的来源。

本节要点反引号模板串支持 ${} 插值与多行；展开运算符复制合并；?. 和 ?? 让空值处理更优雅；对象简写 { name } 是常见缩写。

JavaScript

const name = '小明';
const age = 18;

// 模板字符串：反引号 + ${} 插值
console.log(`我叫 ${name}，今年 ${age} 岁`);
console.log(`明年 ${age + 1} 岁`);       // 里面能写表达式

// 原生多行：拼 HTML 很直观
const listHtml = `<ul>
  <li>${name} 的爱好一</li>
  <li>${name} 的爱好二</li>
</ul>`;
console.log(listHtml);

// 展开运算符：复制与合并
const arr = [1, 2, 3];
console.log([...arr, 4, 5]);
const base = { a: 1 };
console.log({ ...base, b: 2 });

// 可选链 + 空值合并
const user = { profile: { city: '北京' } };
console.log(user?.profile?.city);          // 北京
console.log(user?.tel ?? '未填写');        // 未填写

// 对象属性简写
const finalUser = { name, age };           // 等价 { name: name, age: age }
console.log(finalUser);

🔗 相关词条React HTML Vue JS 数组函数

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读