JavaScript 模板字符串怎么用
在前端开发里，你肯定遇过这种场景：要把名字、年龄和爱好拼成一句话，传统做法得反复用加号连接字符串，还容易出错。比如想输出“我叫小明，今年18岁，爱好是打篮球”，用普通字符串得写：
`javascript
let name = '小明';
let age = 18;
let hobby = '打篮球';
let intro = '我叫' + name + '，今年' + age + '岁，爱好是' + hobby;
`
这样写不仅繁琐，要是漏了一个加号，浏览器直接报错，新手很容易懵。而JavaScript里的模板字符串，就是来解决这个麻烦的“小工具”，用起来简单还不容易出错。
模板字符串的基础写法
模板字符串最显眼的特点，是用反引号（` ``）包裹内容，不是普通的单引号或双引号。举个生活化的例子：你想写一张给朋友的便签，内容里既有固定的“亲爱的XX”，还要插入对方的昵称，用模板字符串就很顺畅：
`javascript
let nickname = '阿圆';
let note = 亲爱的${nickname}，周末一起去公园吗？;
`
这里的${变量名}是核心用法，变量会被自动替换成对应的值，最终note的内容就是“亲爱的阿圆，周末一起去公园吗？”，比用加号拼接清爽多了。而且不管内容里有多少个变量，都不用反复加拼接符号，代码看着干净，还不容易出语法错。
轻松实现换行和特殊符号
平时写字符串时，要是想换行，普通引号得手动加\n转义，比如写一个简单的地址：
`javascript
// 普通字符串要写转义符
let address = '北京市\n朝阳区\nXX小区';
`
要是漏了\n，地址就会挤成一行，看着别扭。但模板字符串不用转义，直接按平时的换行写就行，代码和最终显示的内容完全一致：
`javascript
// 模板字符串直接换行
let address = `北京市
朝阳区
XX小区`;
`
输出的地址会自动分成三行，和你写的格式一模一样，特别适合写多行文本，比如留言、简介这类内容。还有，要是想在内容里加引号，模板字符串里直接用单引号或双引号都不用转义，比如：
`javascript
let desc = 我喜欢的电影是《千与千寻》，里面的台词"不管未来有多难，都要勇敢走下去"很戳人;
`
这样既不用怕引号冲突，也不用加额外的转义符号，对新手特别友好。
实用场景：处理复杂字符串
除了简单的变量替换，模板字符串还能处理稍微复杂的需求。比如你要给用户发一个购物通知，内容里要显示商品名称、数量和总价，普通写法得反复算、反复拼接：
`javascript
let item = '牛奶';
let count = 3;
let price = 5;
let orderTip = '您购买的' + item + '共' + count + '件，总价为' + count * price + '元';
`
用模板字符串的话，计算逻辑直接写在${}里就行，不用额外定义中间变量：
`javascript
let item = '牛奶';
let count = 3;
let price = 5;
let orderTip = 您购买的${item}共${count}件，总价为${count * price}元;
`
最终结果和普通写法一样，但代码更紧凑，改的时候也方便——要是想把总价改成带小数点的格式，直接在${}里加(count * price).toFixed(2)就行，不用再单独改拼接逻辑。
平时写前端页面的DOM内容，用模板字符串也很顺手，比如要渲染用户列表：
`javascript
let users = [
{ name: '小李', age: 20 },
{ name: '小王', age: 22 }
];
let userListHtml = `
- ${user.name}，${user.age}岁
${users.map(user =>
`;
`
这样循环生成列表项，比传统的字符串拼接清晰多了，还不容易出现标签漏写的问题。
总的来说，模板字符串就是让字符串拼接变得更简单、更灵活的工具，不用死记转义符，不用反复加加号，写出来的代码也更易读。平时开发里遇到字符串拼接的场景，优先用它，能少踩很多语法坑。