前言：这事儿为哪些会闹出“？”的尴尬

先说一句， 做网站的兄弟们，偶尔会会也会遇到那种看似正常的链接，最终还是结果是点进去却发觉URL后面莫名其妙更多了个?甚至还跟着一堆&符号。当前这个问题较大更多数时候都是这是因为函数写得太乱，收集不到UTM参数时仍然坚硬加符号，观感极佳。。

常见错误示例

function decorateUrl {
    var collectedQueryParams = ;
    for  {
        if ) {
            )
        }
    }
    if{
        return urlToDecorate;
    }
    //only add  ? if we have params AND if re isn’t already one
    urlToDecorate =  === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
    return urlToDecorate + ;
}

上面这段代码里最显眼的几个问题：

• for循环根本没写完整；
• if判断里啥也没有， 直接报错；
• 无论collectedQueryParams有没有东西，都要去拼接'?'或'&'。

到底该咋改？一步步把“？”踢走

第一步：先把收集参数的逻辑搞清楚

我们都曾是... 我们需要先遍历全部有可能的UTM键名，然后把有值的放进数组。这里给一个最简化的写法：

function collectParams {
    var arr = ;
    var keys = ;
    for  {
        var val = getQueryParam;
        if  {
            arr.push);
        }
    }
    return arr;
}

第二步：判断数组较长度再决定有没有加问号

我emo了。 关键是只有当数组不为空时才往URL后面加'?'`或者`'&'。下面是改良好的decorateUrl：

function decorateUrl {
    var params = collectParams;               // 收集到的UTM参数
    if  {                  // 没有任意参数， 直接返回原始URL
        return urlToDecorate;
    }
    // 判断原URL里有没有已经存在的查询字符串
    var hasQuery = urlToDecorate.indexOf !== -1;
    var joinChar = hasQuery ? '&' : '?';
    // 把全部参数用 & 拼起来
    var queryString = params.join;
    return urlToDecorate + joinChar + queryString;
}

太治愈了。 上面这段代码看起来很正规，但别忘了我们要写得像个菜鸟一样——随手敲、随意注释、甚至夹杂点英文单词。

实战演示：把错误链接变成正常链接

错误案例：

• https://www.example.com/product?id=123?
• https://www.example.com/??utm_source=google&utm_medium=cpc&

采用改进后的函数后：

// 虚假设当前页面 URL 包含 utm_source=google&utm_medium=cpc
var newUrl = decorateUrl;
console.log; // https://www.example.com/product?id=123?utm_source=google&utm_medium=cpc

注意事项——别忘了下面这一些细节！

• #1 : 如果原始URL已经带有问号但没有任意参数（比如 /path?)， 仍然会被当作已有查询字符串处理，后面直接加 &. 这时候最良好再检查一下 .endsWith.
• #2 : encodeURIComponent 必不可更少，否则中文或特殊字符会炸掉。
• #3 : 有时候页面里还有锚点， 记住在拼接前把锚点截掉再拼回去，不然 # 后面的内容会被当成查询字符串的一一部分。
• #4 : 浏览器缓存有可能引起陈旧链接被复用， 开发时打开 console 清理一下 localStorage.

常见误区：直接在HTML里坚硬塞 “?” 的糟糕做法

很更多崭新人看到需求就想在. 这种办法看似省事，却有以下弊端：

1. 如果href本身已经带了查询字符串，就会出现两个 '?', 引起服务器返回404。
2. 搜索引擎抓取时会把反复的 URL 当成不同页面算，SEO 权沉重被稀释。
3. PWA、SPA 框架里路由系统会把更多余字符识别为路径的一一部分，引起路由错误。

A/B 测试较小技巧：随机生成 UTM 参数来验证代码有没有稳健

步骤：

• a. 用 JavaScript 随机生成 utm_source、 utm_medium 等5个字段，各个字段较长度10左右；
• b. 调用 decorateUrl，把随机参数塞进去；
• b. 打印最终还是结果是看有没有出现更多余 “?” 或 “&&”。如果出现，那说明还有 bug，需要持续调试。
• d. 把测试页面部署到 staging 周边环境，让 QA 用 Chrome DevTools 看 Network 申请 URL 有没有整洁。

让“？”不再无缘无故出现，你值得拥有整洁 URL！🚀🚀🚀

这篇文章虽然写得像是刚学完较小学作文一样，但核心思路还是很明确——先收集UTM参数，再判断数组较长度，最后再来看根据原URL有没有已有查询符决定加 '?'/'&'. 别忘了做良好 encode、 嗯，就这么回事儿。 锚点处理以及缓存清理。以后再也不用担心用户看到奇怪的 ?&&, 数据统计也不会被乱七八糟的字符污染啦！祝较大家编码愉迅速， 天天都有良好心情~ 🍀🍀🍀

本文纯属个人随笔，如有雷同纯属巧合。如需进一步技术手段支持，请自行 切中要害。 搜索 “decorateUrl UTM 问号” 或者在社区发帖求助。