当前位置：首页 > news >正文

现代 JavaScript (ES6+) 入门到实战（三）：字符串与对象的魔法升级—模板字符串/结构赋值/展开运算符

news 来源：原创 2025/6/30 12:37:02

在前两篇，我们升级了变量和函数。今天，我们要给 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, // 可简写为 nameage: newAge,   // 可简写为 agecity: '上海'
};// 最终简写形式
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 };