插入HTML后变量无法正常显示的技术问题咨询

核心问题点 #

• 模板字符串里直接写了jQuery('.notificationCenter__list li').length，没有用插值语法，这段代码会被当成纯文本输出，不会执行计算获取数值。
• 已经定义了optNumber变量却没使用，而且最后插入HTML时写错了变量名（用了html而非定义好的html2）。
• const jQuery = jQuery;属于冗余代码，完全没必要保留。

修正后的代码 #

// 直接使用全局jQuery，无需重复赋值
const optNumber = jQuery('.notificationCenter__list li').length;
// 用${}包裹变量，实现模板字符串插值
const html2 = `
<span class="optHeaderMdSm__notification__unread">(${optNumber})</span>
`;
// 修正变量名，确保插入正确的HTML内容
jQuery('.headerLg__notification .link__icon').after(html2).remove('.headerLg__notification .link__icon');

关键说明 #

• ES6模板字符串中，必须通过${变量/表达式}的语法，才能把变量值或表达式计算结果插入到字符串里，直接写代码会被当作普通文本显示。
• 提前计算optNumber并复用，避免重复执行DOM查询，能提升代码性能。
• 注意变量名的一致性，别因为笔误导致插入错误内容。

内容的提问来源于stack exchange，提问作者Jane Lim