尝试替换 $location.search 时如何避免转义？答案

【问题标题】：How to avoid escaping when trying to replace $location.search?尝试替换 $location.search 时如何避免转义？
【发布时间】：2016-10-14 20:19:49
【问题描述】：

 const createParam = (key, value) => '?'+key+'='+value;

 const rebuildUrl = (linkUrl, params) => {
    TagsFactory.resetTickerTags();

    console.log('params', params);
    _.each(params, (param)=> {
        linkUrl += createParam(param.key, param.value);
    });

    console.log('linkUrl', linkUrl);
    // window.location.href = linkUrl;
    $location.search(linkUrl);
};

const checkForStoredLink = () => {
    Util.notEmpty(storedLinkParams) ? rebuildUrl('', storedLinkParams) : null;
};

storedLinkParams = [
    { key: "ticker",
      value: "AAPL" },
    // etc...

我上面的函数将接收 params 数组并生成如下字符串： /dashboard?ticker=AAPL?sort=trend?timespan=day?term_id_1=3010695?start_epoch=1473186060?end_epoch=1473358860

我当前的网址如下所示：

http://localhost/static/dashboard/app/#/dashboard?

一旦我上面的函数到达$location.search 行，它最终看起来像这样，这会破坏 UI：

http://localhost/static/dashboard/app/#/dashboard?%3Fticker=AAPL%3Fsort%3Dtrend%3Ftimespan%3Dday%3Fterm_id_1%3D3010695%3Fstart_epoch%3D1473186060%3Fend_epoch%3D1473358860

【问题讨论】：

为什么不用&分隔参数呢？如果你使用&，你可以传递.search一个对象而不是自己构建字符串
const createParam = (key, value) => '?'+key.trim() + '=' + value.trim();
@MatthewMcveigh 哦，所以$location.search 正在寻找对象？
@gr3g 谢谢，但是trim 没有做任何事情，linkUrl 变成的字符串已经很干净了。这就是我想要替换搜索的内容。
@LeonGaban 它也可以采用字符串，但希望参数由&分隔

标签： javascript angularjs url params

【解决方案1】：

$location.search 期望搜索参数由& 分隔。例如

$location.search('param1=value1&param2=value2'); 导致：?param1=value1&param2=value2

$location.search('?param1=value1?param2=value2') 导致：?%3Fparam1=value1%3Fparam2。

如果您开始使用& 来分隔参数，那么您的生活会更简单，您可以传入一个对象并避免任何字符串构建：

$location.search(_.fromPairs(_.map(params, x => [x.key, x.value])));

JsFiddle Example

上面的代码假定 _ 是 lodash.js 的最新版本，如果不是：

_.each(params, x => $location.search(x.key, x.value));

JsFiddle Example

回答标题中的问题：如果您真的想自己设置原始 url，那么解决方案可能是在 window.location 周围注入您自己的包装器，但不推荐

【讨论】：

谢谢，但该死的 _.fromPairs 没有更新我的网址 :( 现在我的 _.each 也只是更新了第一个参数。嗯不知道发生了什么......
@LeonGaban 抱歉fromPairs 示例错误，将更新。 Here's another alternate solution。为答案添加了一些小提琴 - 希望这会有所帮助