夜雨聆风ES6封神小技能：模板字符串，告别字符串拼接的“精神内耗”！
hello，各位前端小伙伴们~
写代码最烦什么？
拼字符串！
ES5 时代拼字符串，加号加到手抽筋，换行换得想罢工，变量一混就乱套……
直到 ES6 甩出模板字符串这个神器，直接把字符串拼接从“地狱难度”拉到“躺赢模式”！
一、先搞懂：模板字符串是个啥？
一句话总结：
模板字符串 = ES6 给字符串开的“VIP 特权”
用 反引号 `` 包裹（就是键盘左上角 Tab 上面那个键），比单双引号更灵活、更强大、更省心！
核心两大必杀技：
字符串里直接换行，不用拼加号、不用写转义符。 ${变量名} 直接插变量，告别丑陋的 +拼接。
二、模板字符串 案例：
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><title>ES6 模板字符串详解</title></head><body><script>// ==================== 1、基础用法：声明模板字符串 ====================// ES5：只能用 '' "" 声明字符串let str1 = '普通字符串';// ES6：用 `` 反引号声明模板字符串，本质还是字符串！let str = `我是模板字符串，和普通字符串一样，只是更强大！`;// 打印看看console.log(str);// 验证类型：string，妥妥的字符串console.log(str, typeof str);// ==================== 2、神技1：支持直接换行！告别拼接噩梦 ====================// ES5 写法：想换行？必须用 + 拼接，写起来又臭又长，极易出错let str2 = '<ul><li>沈腾</li><li>马丽</li><li>艾伦</li><li>魏翔</li></ul>';// ES6 模板字符串：直接换行！想怎么换就怎么换，代码清爽到飞起// 写 HTML 结构时，这功能直接封神！let str3 = `<ul> <li>沈腾</li> <li>马丽</li> <li>艾伦</li> <li>魏翔</li> </ul>`;console.log("带换行的模板字符串：");console.log(str3);// ==================== 3、神技2：变量直接插入 ${} ，不用 + 号拼接 ====================// 场景：我想把变量 拼到 字符串里let favoriteStar = '魏翔';// ES5 写法：变量 + 字符串，加号多了眼睛都花let oldWay = favoriteStar + ' 是我心目中最搞笑的演员！！！';// ES6 模板字符串：${变量名} 直接塞进去！优雅、直观、零出错let newWay = `${favoriteStar} 是我心目中最搞笑的演员！！！`;console.log("ES5 拼接：", oldWay);console.log("ES6 模板字符串：", newWay);</script></body></html>三、模板字符串到底香在哪？
1. 换行自由，像写文案一样写代码
以前写多行字符串：
// ES5 写到崩溃let html = '<div>' +' <p>姓名：' + name + '</p>' +' <p>年龄：' + age + '</p>' +'</div>';现在用模板字符串：
// ES6 舒服到飞起let html = ` <div> <p>姓名：${name}</p> <p>年龄：${age}</p> </div>`;ES5 拼字符串像挤牙膏，ES6 模板字符串像直接写作文！
2. 变量插入，告别“加号拼接地狱”
以前： '我叫' + name + '，今年' + age + '岁，住在' + city。现在： 我叫${name}，今年${age}岁，住在${city}。
不用数加号，不用怕漏引号，可读性直接拉满！
四、总结
标识：反引号 ``（不是单引号！）。 两大特性： 支持直接换行，多行字符串神器。 ${变量}快速插入变量、表达式。使用场景： 拼接 HTML 结构。 拼接带变量的提示语。 多行文本展示。 一句话口诀：字符串要换行、要插变量，直接用模板字符串，准没错！
五、为什么一定要学模板字符串？
代码更简洁，少写 50% 字符。 可读性爆表，别人一看就懂。 减少拼接错误，降低 Bug 率。 现代前端标配技能，面试必考、工作必用。
模板字符串看似是个小语法，却是 ES6 最实用、最接地气的功能之一！
它解决了前端开发者多年的拼接痛点，让代码从“杂乱无章”变成“清爽优雅”。
以后记住：只要字符串里有变量、有换行，无脑用 `` 模板字符串！不用纠结，不用犹豫，它就是字符串拼接的最优解！
