追記:
URLSearchParams - Web APIs | MDNが使えるならそっちの方が便利。
Search Param付きURL生成
いよいよjQueryを使う必要がなくなってきており、$.ajaxは滅多に使わなくなり、fetchを書くことが増えた。しかし、POSTはまだしもGETでパラメータを送りたい場合、$.ajaxでは
var data = {
a:1,
b:2,
c:3
};
$.ajax({
url:'hogehoge',
method:'GET',
data:data
});
とやればよかったものが、fetchの場合はパラメータのkeyとvalueを&で繋いでURLにくっつけるのを自前でやらねばならない。特にURLにSearch Paramsがある場合は?以降を切った後に繋ぎ直さねばならず面倒くさい。
どうにかならないかと調べてみたところ、anchor要素を使うのが良さそうだった。
anchor要素のhrefにURLを入れると、searchプロパティに?以降の文字列が入る。?以降がなければ空文字となる。
（他にhashに#以降の文字列が入るし、pathnameにはドメイン以下のパスが入る）
そして書き換えるとhrefにも自動的に反映される。
そこで、
var data = {
a:1,
b:2,
c:3
};
var a = document.createElement('a');
a.href = url;
var queryArray = [];
Object.keys(data).forEach(function (key) { return queryArray.push(key + '=' + encodeURIComponent(data[key])); });
a.search = '?' + queryArray.join('&') + a.search.replace(/^\?/, '&');
alert(a.href);
Search Paramsが存在すれば?を&に置換し、存在しなければ空文字なのでそのまま後ろに連結してやれば良い。
この時のa.hrefがパラメータ付きのURLとなる。