模板字符串支持嵌入表达式、多行文本和标签模板，可调用函数、三元运算、访问属性，简化HTML或SQL生成，结合逻辑运算能条件性插入内容，提升代码可读性与灵活性。
模板字符串不只是用来拼接变量。它让 JavaScript 字符串处理变得更灵活、更易读，尤其在处理复杂结构或动态内容时优势明显。
嵌入表达式与逻辑运算
模板字符串支持直接在 ${} 中写表达式，不只是变量。
- 可以调用函数：
`结果是：${Math.max(2, 5)}` - 进行三元判断：
`当前状态：${isActive ? '启用' : '关闭'}` - 访问对象属性或数组元素：
`用户姓名：${user.name}，第1个标签：${tags[0]}`
多行字符串的自然写法
传统字符串换行需要转义或拼接，模板字符串直接回车即可保留格式。
- 生成 HTML 片段更直观：
`<div> <p>你好，${name}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1614" title="Rose.ai"><img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6da698b555377.png" alt="Rose.ai" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1614" title="Rose.ai">Rose.ai</a> <p>一个云数据平台，帮助用户发现、可视化数据</p> </div> <a href="/ai/1614" title="Rose.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>` - 写 SQL 或配置文本也更清晰，无需额外处理换行符
标签模板（Tagged Templates）
在模板字符串前加一个函数名，可以自定义处理逻辑，这是高级用法的核心。
- 函数接收两部分：字符串片段数组和插值结果数组
- 常用于防止 XSS：
safeHTML`<p>${content}</p>` - 也可用于国际化、样式绑定等场景，如 styled-components 就基于此实现
条件性插入内容的技巧
有时希望变量为空时不输出任何内容，包括前后空格或标点。
- 结合逻辑运算符控制输出：
${showLabel && '标签：'} ${value}` - 使用立即执行函数封装判断逻辑
- 适合生成动态属性或可选文案
基本上就这些。掌握这些用法后，字符串操作会更简洁，代码可读性也会提升不少。不复杂但容易忽略。
