在HTML模板字符串中直接书写$(selector).length等jQuery表达式不会自动执行，必须先计算变量值再插入字符串，否则将显示为原始代码而非实际数值。

在html模板字符串中直接书写`$(selector).length`等jquery表达式不会自动执行，必须先计算变量值再插入字符串，否则将显示为原始代码而非实际数值。

在前端开发中，使用模板字符串动态插入DOM内容时，一个常见误区是：误以为 JavaScript 表达式能在模板字符串中“原样执行”。例如以下错误写法：

const html2 = `
<span class="optHeaderMdSm__notification__unread">(${jQuery('.notificationCenter__list li').length})</span>
`;

这段代码看似简洁，实则存在根本性错误：反引号（`）内的 $(...).length 只是普通字符串文本，并非 JavaScript 表达式——它不会被求值，最终渲染到页面上的将是字面量 $(...).length 的字符串形式（如 $(.notificationCenter__list li).length），而非真实的数字（如 3）。

✅ 正确做法是：先计算变量，再通过模板字符串插值（${variable}）注入结果：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

const $ = jQuery; // 推荐简写，提升可读性
const optNumber = $('.notificationCenter__list li').length;

const html2 = `
<span class="optHeaderMdSm__notification__unread">(${optNumber})</span>
`;

// 注意：原代码中使用了未定义的变量 `html`，应为 `html2`
$('.headerLg__notification .link__icon').after(html2);
$('.headerLg__notification .link__icon').remove();

? 关键要点总结：

• ✅ 变量预计算：所有 DOM 查询、计算逻辑必须在模板字符串外完成，确保插值内容为纯值（如数字、字符串）；
• ✅ 变量名语义清晰：如 optNumber 比 count 更明确表达其业务含义（未读通知数）；
• ✅ 避免重复查询：复用已缓存的 optNumber，而非在模板中多次调用 $(...).length，提升性能；
• ⚠️ 检查依赖加载：确保 jQuery 库在脚本执行前已通过 <script> 标签正确引入，否则 $ 或 jQuery 将报 undefined 错误；
• ⚠️ 修正变量引用：原代码中 .after(html) 使用了未声明的 html 变量，应统一为 html2，避免 ReferenceError；
• ? 进阶建议：若需更健壮的动态渲染（如列表为空时隐藏徽标），可增加条件逻辑：

const count = $('.notificationCenter__list li').length;
const html2 = count > 0
  ? `<span class="optHeaderMdSm__notification__unread">(${count})</span>`
  : '';
$('.headerLg__notification .link__icon').after(html2).remove();

遵循以上实践，即可彻底解决“变量无法在 HTML 字符串中显示”的问题，写出清晰、可靠、易维护的 jQuery 动态插入逻辑。