JavaScriptでURLにクエリ文字列を追加する方法 - コード例と共に解説

2024-02-09 16:03 JavaScript URL クエリ文字列

  1. URLSearchParamsオブジェクトを使用する方法:

    const url = new URL('https://example.com');
const params = new URLSearchParams(url.search);
params.append('key', 'value');
url.search = params.toString();
console.log(url.href);

  2. 文字列操作を使用する方法:

    const url = 'https://example.com';
const queryString = 'key=value';
const updatedUrl = url + (url.includes('?') ? '&' : '?') + queryString;
console.log(updatedUrl);

  3. 正規表現を使用する方法:

    const url = 'https://example.com';
const queryString = 'key=value';
const updatedUrl = url.replace(/(\?|$)/, `?${queryString}$1`);
console.log(updatedUrl);

これらの方法を使用すると、既存のURLにクエリ文字列を追加することができます。選択した方法に応じて、上記のコード例を参考にしてください。また、より詳細な情報や他の方法については、公式のJavaScriptドキュメントや関連するウェブリソースを参照することをおすすめします。

以上が、JavaScriptでURLにクエリ文字列を追加する方法の解説です。これを参考にして、自分のプロジェクトやコードに適用してみてください。