如何用JavaScript的URLSearchParams重构UTM参数判断逻辑？

需求说明 #

判断当前URL的查询参数中是否存在utm_source、utm_campaign、pkwid、ep_mid、et_mid、ep_rid这6个参数中的任意一个：

• 若存在任意一个，返回'external campaign'
• 若都不存在，返回'browse'

原实现（indexOf方法） #

var a = "";
var url = window.location.href;

if((url.indexOf("utm_source") != -1) || 
   (url.indexOf("utm_campaign") != -1) || 
   (url.indexOf("pkwid") != -1) || 
   (url.indexOf("ep_mid") != -1) || 
   (url.indexOf("et_mid") != -1) || 
   (url.indexOf("ep_rid") != -1)) {
  a = "external campaign";
} else {
    a = "browse";
}

return a;

改用URLSearchParams的实现方法 #

// 定义需要检测的目标参数列表
const targetParams = ['utm_source', 'utm_campaign', 'pkwid', 'ep_mid', 'et_mid', 'ep_rid'];
// 初始化实例，自动解析当前URL的查询参数部分
const searchParams = new URLSearchParams(window.location.search);

// 批量检查是否存在任意一个目标参数
const hasTargetParam = targetParams.some(param => searchParams.has(param));

// 返回对应结果
return hasTargetParam ? 'external campaign' : 'browse';

实现优势 #

• 准确性更高：URLSearchParams仅解析URL中?后的查询参数，不会误判参数名出现在路径、哈希或其他非参数位置的情况
• 代码更简洁：借助数组some方法批量校验，避免重复的条件判断逻辑
• 可读性更强：searchParams.has()语义化明确，清晰表达“检查参数是否存在”的意图

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