本文介绍如何在 jquery 中通过 es6 模板字符串（反引号）安全地拆分超长 css 选择器，提升代码可读性与可维护性，避免因换行或引号嵌套导致的语法错误。
本文介绍如何在 jquery 中通过 es6 模板字符串（反引号）安全地拆分超长 css 选择器，提升代码可读性与可维护性，避免因换行或引号嵌套导致的语法错误。
在 jQuery 开发中，有时需排除大量 DOM 元素（如导航组件、表单控件、特定容器等），导致 :not() 伪类内嵌的选择器列表异常冗长。若强行将整个选择器写在单行中，不仅难以阅读，更不利于后续维护和调试。而直接在双引号或单引号内换行——例如将 ".navbutton, .navbutton span, #menuContainer, ..." 拆成多行——会导致 JavaScript 语法错误（Unterminated string literal），因为传统字符串字面量不支持跨行。
✅ 正确解法：使用
ES6 模板字符串（Template Literals）
，即用反引号 ` 包裹选择器字符串。模板字符串天然支持多行书写、保留空白符，并可嵌入表达式（如变量插值），完美适配复杂选择器场景。
以下为规范写法示例：
? 关键要点说明：
立即学习
“
前端免费学习笔记（深入）
”；
反引号 是必需的，不可替换为'或"`；
:not() 内部的整个选择器字符串（含引号）作为单一参数传递，因此双引号需保留在模板字符串内部（即 "..." 本身是字符串内容的一部分）；
缩进与换行仅影响代码可读性，
不会影响最终生成的选择器语义
——浏览器解析时仍将其视为一个连续的 CSS 选择器字符串；
若需动态构建排除列表（如根据配置项生成），可结合模板字符串插值：
⚠️ 注意事项：
模板字符串是 ES6+ 特性，确保目标运行环境（浏览器或 Node.js）支持（现代浏览器及 Webpack/Vite 等构建工具默认支持）；
避免在模板字符串中意外引入不可见 Unicode 字符（如全角空格、零宽字符），可能引发难以排查的解析失败；
过度依赖超长 :not() 可能影响性能，建议优先考虑语义化委托（如绑定到 并过滤 e.target）或重构 DOM 结构以降低选择器复杂度。
综上，利用模板字符串是解决 jQuery 超长选择器可读性问题的标准、简洁且符合现代 JavaScript 实践的方案。
jQuery(`*:not(
".navbutton,
.navbutton span,
#menuContainer,
#rollmenu,
#postersTheme,
optgroup,
optgroup option,
.custom-select,
.select-selected,
#divSelectedSize,
#divSelectedQty,
#divSelectedCountry,
#divSizeItems,
#divQtyItems,
#divCountryItems"
)`).click(function(e) {
// 处理点击事件逻辑
console.log('点击发生在被排除范围之外的元素上');
});const excludedSelectors = [
'.navbutton',
'.navbutton span',
'#menuContainer',
'#rollmenu'
].join(',\n ');
jQuery(`*:not("${excludedSelectors}")`).click(/* ... */);