前端实现站点对比时如何为URI各站点添加独立查询参数

你最初设计的两种URL格式均不符合RFC 3986 URL规范：

• 查询字符串必须以单个?作为起始标记，后续所有参数对只能用&分隔，你设计的?start_at=xxx&site2?start_at=xxx中第二个?属于非法字符，会被所有标准URL解析器识别为site2参数的值内容，无法作为新的查询串起点。
• &作为查询参数分隔符，只能出现在?之后，你期望的无参格式/site1&site2中，&会被解析为路径的一部分，无法起到分隔站点的作用。

你当前编写的代码生成编码后的URL是符合规范的预期行为：URLSearchParams.append会自动对参数值中的特殊字符（=、&等）做百分号编码，避免参数结构混乱。你如果强行解码得到未编码的&和=，会导致两个站点的start_at、end_at参数重名，所有标准解析器都会将重名参数合并为数组，根本无法区分参数归属的站点。

推荐使用参数名前缀区分站点的方案，完全兼容标准URL规范，无解析兼容问题，且和你现有单站点逻辑100%兼容。

方案规则 #

• 主站点site1的参数保持原有命名不变，旧代码无需任何修改
• 对比站点site2的参数统一加site2_前缀
• 新增compare参数标记当前是否开启对比模式，避免无参数时无法识别对比状态

不同场景URL示例 #

• 单站点无参数：localhost:3000/website/site1（和现有逻辑完全一致）
• 单站点带日期参数：localhost:3000/website/site1?start_at=2022-11-02&end_at=2022-06-25（和现有逻辑完全一致）
• 双站点对比无参数：localhost:3000/website/site1?compare=site2
• 双站点对比都带日期参数：localhost:3000/website/site1?start_at=2022-11-02&end_at=2022-06-25&compare=site2&site2_start_at=2022-11-02&site2_end_at=2022-06-25

实现代码 #

const searchParams = new URLSearchParams()

// 追加主站点site1的参数，和原有逻辑一致
searchParams.append('start_at', format(new Date(dateRange.start_at), "yyyy-MM-dd"))
searchParams.append('end_at', format(new Date(dateRange.end_at), "yyyy-MM-dd"))

// 开启对比模式时，追加对比标记和site2的参数
if (enableCompare) {
  searchParams.append('compare', 'site2')
  searchParams.append('site2_start_at', format(new Date(dateRangeCompare.start_at), "yyyy-MM-dd"))
  searchParams.append('site2_end_at', format(new Date(dateRangeCompare.end_at), "yyyy-MM-dd"))
}

// 拼接最终URL，路径保持原有/site1不变
const finalUrl = `${window.location.origin}/website/site1?${searchParams.toString()}`

扩展方案（多站点对比场景） #

如果后续需要支持2个以上站点对比，可以使用行业通用的方括号分组参数约定，配合qs、query-string等通用参数解析库，可以直接解析出结构化的站点参数对象，URL格式示例：
localhost:3000/website/site1?compare=site2,site3&sites[site1][start_at]=2022-11-02&sites[site1][end_at]=2022-06-25&sites[site2][start_at]=2022-11-02&sites[site2][end_at]=2022-06-25

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