在前两篇，我们升级了变量和函数。今天，我们要给 JavaScript 中最常用的两种数据类型——字符串（String）和对象（Object）——装备上 ES6 带来的强大魔法。
准备好告别丑陋的 + 号拼接和重复的对象属性赋值了吗？
一、回忆杀：令人抓狂的字符串拼接
在项目中，我们经常需要动态地将变量和 HTML 组合起来。在 ES5 时代，这通常是一场灾难。
【过去我们这么写 (ES5)】
var user = {
name: '小明',
age: 18,
website: 'https://example.com'
};
var profileCard =
'<div class="card">' +
'<h2>' + user.name + '</h2>' +
'<p>年龄：' + user.age + '</p>' +
'<p>个人主页：<a href="' + user.website + '">' + user.website + '</a></p>' +
'</div>';
console.log(profileCard);
这种写法不仅丑陋，而且非常容易出错：
- 大量的
+号和引号，很容易漏掉一个。 - 不能自由换行，否则会报语法错误。
- 变量和字符串混在一起，难以阅读。
二、进化时刻：模板字符串 (Template Literals) 登场
ES6 引入了模板字符串，它彻底改变了我们处理字符串的方式。
【现在我们这么写 (ES6+)】
const user = {
name: '小明',
age: 18,
website: 'https://example.com'
};
const profileCard = `
<div class="card">
<h2>${user.name}</h2>
<p>年龄：${user.age}</p>
<p>个人主页：<a href="${user.website}">${user.website}</a></p>
</div>
`;
console.log(profileCard);
魔法揭秘：
- 使用反引号
`：模板字符串使用反引号（键盘左上角，数字1左边的那个键）包裹，而不是单引号或双引号。 - 自由换行：在反引号内，你可以随意换行，所有空格和缩进都会被保留。
- 嵌入变量
${}：使用${...}语法，你可以轻松地将任何变量或表达式嵌入到字符串中。{}里面甚至可以进行计算，比如${user.age + 1}。
现在，代码的可读性和可维护性都得到了质的飞跃！
三、回忆杀：繁琐的对象操作
处理对象是日常开发的核心任务之一。在 ES5 中，从对象里取值或者创建新对象，往往伴随着大量的重复代码。
【过去我们这么写 (ES5)】
var person = { name: '张三', age: 30, city: '北京' };
// 1. 从对象取值
var name = person.name;
var age = person.age;
console.log('你好，我叫' + name + '，今年' + age + '岁。');
// 2. 创建新对象
var newName = '李四';
var newAge = 25;
var newPerson = {
name: newName,
age: newAge,
city: '上海'
};
四、进化时刻：解构与简写
ES6 为对象和数组带来了“解构赋值”和一系列简写语法，让代码变得极其精炼。
1. 解构赋值 (Destructuring Assignment)
解构赋值允许你从对象或数组中“提取”值，并直接赋给变量。
【现在我们这么写 (ES6+)】
const person = { name: '张三', age: 30, city: '北京' };
// 从对象中解构出 name 和 age 两个变量
const { name, age } = person;
console.log(`你好，我叫${name}，今年${age}岁。`); // 使用了模板字符串！
一行代码 const { name, age } = person; 就等同于 ES5 的两行赋值语句。变量名必须和对象属性名相同。你也可以给变量起别名：const { name: personName } = person;。
2. 对象属性简写
当你要创建的对象属性名和你手中的变量名相同时，可以进行简写。
【现在我们这么写 (ES6+)】
const newName = '李四';
const newAge = 25;
// 因为变量名和属性名相同，可以简写
const newPerson = {
name: newName, // 可简写为 name
age: newAge, // 可简写为 age
city: '上海'
};
// 最终简写形式
const simplifiedPerson = {
name: newName,
age: newAge,
city: '上海'
};
3. 展开运算符 (...)
展开运算符像一个魔法棒，可以“展开”一个对象或数组，常用于合并或克隆。
const baseConfig = { host: 'localhost', port: 8080 };
const userConfig = { port: 3000, user: 'admin' };
// 合并对象，userConfig 会覆盖 baseConfig 中的同名属性
const finalConfig = { ...baseConfig, ...userConfig };
// finalConfig 的结果是: { host: 'localhost', port: 3000, user: 'admin' }
// 浅克隆一个对象
const clonedPerson = { ...person };
总结
- 模板字符串用
`和${}，彻底解决了字符串拼接的痛点，让代码更清晰。 - 解构赋值让从复杂数据结构中提取信息变得无比简单。
- 对象属性简写和展开运算符让创建和合并对象的操作大大简化。
掌握了这些“魔法”，你的代码不仅会写得更快，也会让同事对你刮目相看。
在下一篇，我们将把目光投向数组，学习 map、filter 等强大的高阶函数，看看如何用更声明式、更优雅的方式来处理集合数据。敬请期待！