写 JS 写久了，你一定见过这种代码：
const name = "小明";
const age = 20;
const str = "我的名字叫 " + name + "我的年龄" + age;
说实话，这种代码我现在看到基本是直接皱眉的。
不是不能用，是：
👉 太原始了
一、模板字符串到底解决了什么问题？
一句话总结：
👉 把“字符串拼接”变成“字符串模板”
也就是这个东西：
const str = `My name is ${name} and I am ${age} years old`;
看起来很简单，但它解决的是一个长期存在的问题：
👉 字符串一旦复杂，就会变得很难维护
二、为什么我基本不用 + 了
你可以对比一下这两种写法：
❌ 拼接写法
const url = "/api/user/" + userId + "?page=" + page + "&size=" + size;
✅ 模板字符串
const url = `/api/user/${userId}?page=${page}&size=${size}`;
差别不在“少写几个字符”，而在：
👉 结构更清晰
三、一个很多人低估的能力：表达式
很多人以为 ${} 只能放变量，其实不是。
它本质上可以放：
👉 任意表达式
const str = `2 + 2 = ${2 + 2}`;
甚至：
const str = `User: ${user.isLogin ? user.name : "Guest"}`;
👉 这其实已经接近“模板引擎”的感觉了
四、多行字符串，才是我最常用的点
这个点很多人忽略，但我用得最多。
以前你要写 HTML：
const html = "<div>\n" +
" <span>Hello</span>\n" +
"</div>";
现在：
const html = `
<div>
<span>Hello</span>
</div>
`;
👉 可读性完全不是一个级别
五、真实项目里的一个坑
这里说点很多文章不会讲的。
如果你用模板字符串拼 HTML，比如：
const html = `<div>${userInput}</div>`;
👉 这里是有风险的
如果 userInput 是用户输入：
👉 可能会导致 XSS，如何解决，
这个问题本质上不是模板字符串的问题，而是：
👉 你把“数据”和“HTML”混在一起了
六、为什么说这是“语法升级”，不是“语法糖”
很多人觉得模板字符串只是语法糖。
我不太认同。
因为它改变的是：
👉 写代码的方式
从：
👉 拼字符串
变成：
👉 写模板
七、什么时候不该用？
也说点反面：
👉 不要滥用复杂表达式
比如：
`${a ? b : c ? d : e ? f : g}`
这种代码：
👉 可读性直接崩掉
八、总结一句话
模板字符串真正的价值，不是让你少写几个 +，而是：
👉 让字符串变成“结构化的代码”
如果你还在大量用 + 拼字符串：
👉 那基本可以判断，你的代码还停在 ES5 时代。
