URLでは、クエリ文字列値は、検索のパラメータや使用しているオブジェクトのIDなど、リクエストに関する情報を提供することがよくあります。 ビジネスロジックまたはリクエストロジックのいずれかがフロントエンドで処理される場合は、URLからクエリ文字列値を取得する方法を知っておくことが重要です。 これを実現する方法はいくつかありますが、そのうちのいくつかをここで説明します。
URLSearchParams
URLSearchParams インターフェイスは、IE 11を除くすべての主要なブラウザバージョンでサポートされています。これは、URLのクエリ文字列を解析し、値にアクセスする方法を提供することで機能します。 例えば：
let params = new URLSearchParams('q=node&page=2');
params.get('q');
params.get('page');
このインターフェイスの欠点のXNUMXつは、URLのクエリ文字列のみを渡す必要があることです。 現在のブラウザのURLを使用している場合は、渡すだけで簡単に実行できます。 window.location.search。 他のURLを使用している場合は、クエリ文字列を個別に解析して渡す必要があります。
クエリパラメータをオブジェクトに解析するには、次を使用します URL.searchParams〜の .entries() メソッド。 Iterator キー/値ペアの、および Object.fromEntries それをオブジェクトに変換します。
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);
URLオブジェクト
URL APIは、IE 11を除くすべての主要なブラウザーバージョンでもサポートされています。APIは、URLを解析するためのより柔軟な方法を提供し、クエリ文字列値にアクセスする方法も提供します。 例えば：
const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;
searchParams.get('q');
searchParams.get('page');
url.searchParams によって返されるのと同じタイプのインスタンスオブジェクトです URLSearchParams.
url 上記のオブジェクトには、URLのすべての部分がその部分に分割されています。 例えば：
url.href;
url.origin;
url.protocol;
url.host;
url.hostname;
url.port;
url.pathname;
url.search;
url.hash;
純粋なJavaScript
何らかの理由で上記のAPIにアクセスできない場合、または解析をより詳細に制御したい場合は、次のコードを使用してクエリ文字列を解析してオブジェクトにすることができます。
function getQueryParams(url) {
const paramArr = url.slice(url.indexOf('?') + 1).split('&');
const params = {};
paramArr.map(param => {
const [key, val] = param.split('=');
params[key] = decodeURIComponent(val);
})
return params;
}
Note：プレーンJSでクエリパラメータを解析する方法はたくさんありますが、他の方法よりも複雑（かつ堅牢）な方法もあります。 これは一方向に過ぎず、 この要点.
次に、このプレーンなJS関数を使用して、単一のクエリパラメータを文字列に解析できます。
getQueryParams('https://stackabuse.com/search?q=node&page=2')
