JavaScriptでURLにクエリ文字列を追加する方法

まず、URLにクエリ文字列を追加するためには、以下の手順を実行します。

1. URLを取得します。これは現在のページのURLか、新しいURLを指定することができます。

let url = window.location.href; // 現在のページのURLを取得
// 新しいURLを指定する場合
let url = "https://example.com/page";

2. クエリ文字列を作成します。クエリ文字列は、?で始まり、key=valueの形式でパラメータを指定します。複数のパラメータを追加する場合は、&で区切ります。

let query = "?param1=value1&param2=value2";

3. URLにクエリ文字列を追加します。URLが既にクエリ文字列を含んでいる場合は、&でパラメータを追加します。含んでいない場合は、?を付けてパラメータを追加します。

// URLにクエリ文字列を追加
let newUrl = url + query;

これで、新しいURLにはクエリ文字列が追加されました。

上記の手順を簡単なコード例で示します。

function addQueryToUrl(url, query) {
  if (url.includes('?')) {
    // URLに既にクエリ文字列が含まれている場合
    url += '&' + query;
  } else {
    // URLにクエリ文字列が含まれていない場合
    url += '?' + query;
  }
  return url;
}
let url = "https://example.com/page";
let query = "param1=value1&param2=value2";
let newUrl = addQueryToUrl(url, query);
console.log(newUrl);

このようにすることで、JavaScriptを使用してURLにクエリ文字列を追加することができます。これはブログ投稿において、URLを操作する必要がある場合に特に有用です。