如何在disable()返回true时为URL追加查询参数？

我希望仅当disable()函数返回true时，向URL追加两个新的查询参数（例如hello=true&voice=hello）。目前我用了如下append方法，想问有没有更优或更简洁的写法？

disable() === true ? url.searchParams.append('hello', 'true') : url
disable() === true ? url.searchParams.append('voice', 'hello') : url

我尝试过字符串拼接，但出现了「Unexpected string concatenation」错误：

const urlNew = disable() === true ? url + '?hello=true&voice=hello' : url;

优化方案 #

• 减少重复判断，提升可读性与性能
  没必要两次调用disable()，先缓存判断结果，再批量添加参数：

  const shouldAppend = disable();
  if (shouldAppend) {
    url.searchParams.append('hello', 'true');
    url.searchParams.append('voice', 'hello');
  }
  

  这种写法逻辑清晰，只执行一次disable()调用，避免冗余操作，同时URLSearchParams会自动处理参数编码、重复参数等问题，是最推荐的方案。

• 修复字符串拼接的ESLint提示问题
  你遇到的「Unexpected string concatenation」是ESLint的规则警告，不建议直接拼接URL字符串。如果一定要用字符串方式，需要处理原URL是否已有查询参数的情况：

  const shouldAppend = disable();
  let urlNew = url.toString();
  if (shouldAppend) {
    const separator = urlNew.includes('?') ? '&' : '?';
    urlNew += `${separator}hello=true&voice=hello`;
  }
  

  但这种方式不如URLSearchParams健壮，比如无法自动处理参数编码，仅适合简单场景。

• 简洁的链式写法（适合简单场景）
  如果追求代码简洁，可以用逻辑与&&配合逗号运算符实现：

  disable() && (
    url.searchParams.append('hello', 'true'),
    url.searchParams.append('voice', 'hello')
  );
  

  这种写法行数少，但可读性略低于if语句，适合逻辑简单的场景。

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