在 HTML 字符串中直接拼接 jQuery 对象或表达式（如 $(...).length）无法自动求值，必须先计算变量再插入字符串，否则显示为原始代码而非实际数值。
在 html 字符串中直接拼接 jquery 对象或表达式（如 `$(...).length`）无法自动求值，必须先计算变量再插入字符串，否则显示为原始代码而非实际数值。
在前端开发中，常需将 JavaScript 变量动态注入 HTML 片段并插入 DOM。一个典型错误是：在模板字符串中直接书写 jQuery 表达式，误以为它会在字符串解析时自动执行。例如：
const html2 = `
<span class="optHeaderMdSm__notification__unread">(${jQuery('.notificationCenter__list li').length})</span>
`;这段代码看似简洁，实则存在根本性问题：反引号（`）包裹的模板字符串 不会执行其中的 $() 调用，而是将其作为纯文本字面量处理。最终渲染结果会是类似：
<span class="optHeaderMdSm__notification__unread">(jQuery('.notificationCenter__list li').length)</span>即浏览器原样显示该字符串，而非数字（如 (5)）。
✅ 正确做法是：先计算值，再拼入字符串。推荐写法如下：
立即学习“前端免费学习笔记（深入）”；
const $listItems = jQuery('.notificationCenter__list li');
const optNumber = $listItems.length;
const html2 = `
<span class="optHeaderMdSm__notification__unread">(${optNumber})</span>
`;
// 插入新元素（注意：使用 html2，而非未定义的 html）
jQuery('.headerLg__notification .link__icon').after(html2);
// 单独移除原图标元素（避免链式调用中 remove() 作用于错误对象）
jQuery('.headerLg__notification .link__icon').remove();? 关键要点总结：
- ✅ 变量先行：所有动态值必须提前计算并赋给变量（如 optNumber），再通过 ${optNumber} 插入模板字符串；
- ✅ 命名清晰：使用语义化变量名（如 $listItems）提升可读性与可维护性；
- ✅ 避免链式歧义：.after(html).remove(...) 是错误写法——.after() 返回的是原 jQuery 对象（即 .link__icon 元素本身），后续 .remove() 会删掉它，但此时 html 变量未定义（原文中误写为 html，实际应为 html2）。应拆分为两步，明确操作目标；
- ✅ 环境前提：确保 jQuery 已正确加载（如 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 在 DOM 解析前引入），否则 $ 或 jQuery 将报 undefined 错误。
? 进阶建议：若逻辑复杂或需多次复用，可封装为函数：
function renderUnreadBadge(selector) {
const count = jQuery(selector).length;
const badge = $(`<span class="optHeaderMdSm__notification__unread">(${count})</span>`);
jQuery('.headerLg__notification .link__icon').after(badge);
}
renderUnreadBadge('.notificationCenter__list li');这样既增强健壮性，也便于测试与扩展。
