本文介绍使用 es6 模板字符串（反引号）将超长 jquery 选择器拆分为多行，提升代码可读性与可维护性，同时保持语法正确性和浏览器兼容性。
本文介绍使用 es6 模板字符串（反引号）将超长 jquery 选择器拆分为多行，提升代码可读性与可维护性，同时保持语法正确性和浏览器兼容性。
在前端开发中，有时需通过 jQuery 排除大量 DOM 元素（例如全局点击事件中忽略导航、下拉菜单、表单控件等），导致 :not() 选择器内部列表极长。若强行写在单行，不仅难以阅读、调试困难，还极易因逗号遗漏或引号错位引发运行时错误。
传统单引号 ' 或双引号 " 不支持原生换行，直接回车会导致语法错误。而 ES6 引入的模板字符串（用反引号 ` 包裹）天然支持多行文本和内嵌表达式，是解决该问题的理想方案。
✅ 正确写法（推荐）：
jQuery(`*:not(
".navbutton,
.navbutton span,
#menuContainer,
#rollmenu,
#postersTheme,
optgroup,
optgroup option,
.custom-select,
.select-selected,
#divSelectedSize,
#divSelectedQty,
#divSelectedCountry,
#divSizeItems,
#divQtyItems,
#divCountryItems"
)`).click(function(e) {
// 处理点击逻辑，此处将忽略上述所有匹配元素
});⚠️ 注意事项：
- 反引号 ` 是英文键盘上 Tab 键上方、数字键 1 左侧的符号，不可误用为单引号 ' 或中文顿号、引号；
- :not() 内部的整个选择器字符串必须完整包裹在一对双引号（"）中，且该双引号需位于反引号内部——即外层是模板字符串（`），内层是 CSS 选择器字符串（"..."）；
- 换行与缩进仅作用于字符串内容，不会影响实际 CSS 选择器语义；jQuery 仍将其解析为标准的 *:not("...")；
- 所有换行符和空格会原样保留在生成的字符串中，但 CSS 选择器对空白符不敏感，因此安全可靠；
- 需确保运行环境支持 ES6（现代浏览器及主流构建工具均默认支持；如需兼容 IE，应通过 Babel 转译）。
? 进阶技巧：可结合变量动态构建排除列表，增强复用性：
const excludedSelectors = [
'.navbutton',
'.navbutton span',
'#menuContainer',
'optgroup',
'.custom-select'
].join(', ');
jQuery(`*:not("${excludedSelectors}")`).on('click', function(e) {
console.log('点击发生在非排除区域');
});总结：使用模板字符串是 jQuery 多行选择器最简洁、标准且可扩展的解决方案。它既符合现代 JavaScript 规范，又无需引入额外依赖或复杂封装，建议在团队协作与长期维护项目中作为最佳实践统一采用。
