如何在 jQuery 中优雅地书写多行选择器-js教程-PHP中文网

本文介绍使用 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 规范，又无需引入额外依赖或复杂封装，建议在团队协作与长期维护项目中作为最佳实践统一采用。