JavaScript模板字符串用反引号包裹，支持${}插入变量、表达式、函数调用，天然多行，可嵌套逻辑与条件处理，需注意作用域、转义及语句限制。
JavaScript 中用模板字符串动态拼接字符串，核心是用反引号（`）包裹文本，并在其中用 ${} 插入变量、表达式或函数调用。
基础写法：插入变量和简单表达式
模板字符串支持直接嵌入变量名或计算表达式，无需加号（+）或 concat()。
- 变量直接写进
${variable}，比如：let name = "小明"; console.log(`你好，${name}！`);→ 输出“你好，小明！” - 支持内联表达式：
let a = 5, b = 3; console.log(`和是 ${a + b}，乘积是 ${a * b}`); - 可调用函数：
console.log(`当前时间：${new Date().toLocaleTimeString()}`);
多行字符串天然支持
反引号内的换行、缩进会原样保留，不用 \n 或连接符。
- 例如：
let msg = `姓名：张三\n年龄：28`; // 换行生效 - 更自然的写法：
let html = `<div class="user"> <h2>${name}</h2> <p>注册于 ${new Date().getFullYear()}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/gongju/2847" title="OpenJDK 24"><img src="https://img.php.cn/upload/manual/001/431/639/6ad0919a12f37751.png" alt="OpenJDK 24" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/gongju/2847" title="OpenJDK 24">OpenJDK 24</a> <p></p> </div> <a href="/xiazai/gongju/2847" title="OpenJDK 24" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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>”；</p> </div>`;
嵌套逻辑与条件处理
可以在 ${} 中使用三元运算符、逻辑运算符，甚至短路表达式来控制内容输出。
- 条件显示：
console.log(`状态：${isActive ? '在线' : '离线'}`); - 避免 undefined：
console.log(`邮箱：${user.email ?? '未设置'}`); - 组合多个值：
console.log(`ID: ${id || '暂无'} | 级别: ${level?.toUpperCase() || '普通'}`);
注意点：作用域与转义
模板字符串中的 ${} 在定义时立即求值，作用域取决于它所在的位置（不是字符串本身的作用域）。
-
${}内不能直接写语句（如 if、for），但可用 IIFE 或箭头函数封装逻辑 - 反引号中要输出字面量
$和{，需转义：`价格：\$${price}`→ “价格：$199” - 嵌套模板字符串也合法：
let unit = 'kg'; console.log(`${`重量：${weight}${unit}`}`);
