jQueryを使わないでGETのパラメータ付きURLを生成する

追記:

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となる。

参考

[HTMLAnchorElement - Web API インターフェイス | MDN]
(https://developer.mozilla.org/ja/docs/Web/API/HTMLAnchorElement)