ES6封神小技能:模板字符串,告别字符串拼接的“精神内耗”!

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 最实用、最接地气的功能之一！

它解决了前端开发者多年的拼接痛点，让代码从“杂乱无章”变成“清爽优雅”。

以后记住：只要字符串里有变量、有换行，无脑用 `` 模板字符串！不用纠结，不用犹豫，它就是字符串拼接的最优解！