一、字符串模板：告别笨拙拼接的魔法咒语
1.1 传统拼接 VS 模板字符串：谁更优雅？
以前拼接字符串像搭积木，得用+号左拼右凑：
// 传统写法：像拼乐高一样麻烦😣
const name = '旺财';
const age = 2;
const sentence = 'My dog ' + name + ' is ' + (age * 7) + ' years old';
console.log(sentence); // My dog 旺财 is 14 years old
ES6 模板字符串用反引号（`）包裹，变量直接嵌进 ${} 里，像写作文一样自然：
// 模板字符串：一行搞定所有变量插入
const sentence = `My dog ${name} is ${age * 7} years old`;
console.log(sentence); // 同样输出，但代码清爽多啦~
1.2 多行字符串：格式保留大师
传统字符串写多行得加\n换行符，格式还容易乱：
// 传统多行：像打空格俄罗斯方块❌
const html = ' <div>\n <h1>标题</h1>\n <p>内容</p>\n</div> ';
模板字符串直接换行写，HTML 结构原汁原味：
// 模板字符串多行：格式完全还原
const html = `
<div>
<h1>标题</h1>
<p>内容</p>
</div>
`;
document.body.innerHTML = html; // 直接渲染，格式不跑偏呢~
1.3 表达式嵌入：计算能力藏进字符串
占位符 ${} 里不仅能放变量，还能写任何 JS 表达式：
const price = 99.9;
const discount = 0.8;
// 直接计算折后价+拼接字符串
const msg = `原价${price}元，打${discount*10}折后：${price*discount}元`;
console.log(msg); // 原价99.9元，打8折后：79.92元
二、map 方法：数组变魔术的流水线
2.1 map VS forEach：返回值的秘密武器
forEach：遍历数组做事情，但不返回新数组（像扫地机器人，只干活不交货）map：遍历 + 加工元素，返回全新数组（像工厂流水线，输入原料输出成品）
2.2 实战：从数据到 HTML 的丝滑转换
假设有一群朋友的数据，要生成列表 HTML：
const friends = [
{ name: "小欢", hometown: "抚州" },
{ name: "小刘", hometown: "赣州" },
{ name: "小夏", hometown: "南昌" }
];
const ul = document.querySelector('#friends');
// map+箭头函数：一行代码生成HTML数组
ul.innerHTML = friends.map(friend => `
<li>
${friend.name} - <i>${friend.hometown}</i>
</li>
`).join(''); // 用join把数组转成字符串，塞进ul里~
2.3 业务场景：数据格式化神器
比如后端返回价格是数字，前端要转成 "¥199.00" 格式：
const prices = [199, 29.9, 88];
// map把每个数字转成带符号的字符串
const formattedPrices = prices.map(price => `¥${price.toFixed(2)}`);
console.log(formattedPrices); // ["¥199.00", "¥29.90", "¥88.00"]
三、代码实战：用 ES6 重构你的日常开发
3.1 字符串模板完整案例
// 场景：生成用户欢迎消息
const user = {
name: "豆包",
level: 3,
points: 1280
};
// 模板字符串里写条件逻辑+表达式
const welcomeMsg = `
欢迎 ${user.name}！
你当前是${user.level}级用户，
距离下一级还需${1500 - user.points}积分~
`;
console.log(welcomeMsg);
3.2 map 进阶：复杂数据转换
假设后端返回商品列表，需要提取名称和价格：
const products = [
{ id: 1, name: "笔记本", price: 4999, stock: 10 },
{ id: 2, name: "耳机", price: 299, stock: 50 },
{ id: 3, name: "键盘", price: 199, stock: 20 }
];
// map提取所需字段，组成新数组
const simpleProducts = products.map(item => ({
name: item.name,
price: `¥${item.price}`,
isInStock: item.stock > 0 ? '有货' : '缺货'
}));
console.log(simpleProducts);
/* 输出：
[
{ name: "笔记本", price: "¥4999", isInStock: "有货" },
// 其他项...
]
*/
四、总结：ES6 让代码又快又美
-
字符串模板：反引号 +${}，拼接多行、表达式全搞定，代码像诗一样优雅～
-
map 方法：数组转换的瑞士军刀，比 for 循环更简洁，比 forEach 更强大！
下次写代码时，记得试试这些神器哦～让你的代码既有速度又有风度，成为团队里的编程魔法师吧！
