クエリ文字列をオブジェクトに変換する

はじめに

この実験では、JavaScript を使ってクエリ文字列または URL をオブジェクトに変換する方法を探ります。URL からパラメータを抽出するためにString.prototype.split()メソッドを使い、次にURLSearchParamsコンストラクタを使ってオブジェクトを作成し、キーと値のペアの配列に変換します。最後に、Array.prototype.reduce()を使って配列を JavaScript オブジェクトに変換します。この実験は、JavaScript で URL やクエリ文字列からデータを操作して抽出する方法を理解するのに役立ちます。

クエリ文字列をオブジェクトに変換する

クエリ文字列または URL をオブジェクトに変換するには、次の手順に従います。

1. ターミナル/SSH を開き、コーディングを練習するためにnodeと入力します。
2. 与えられたurlからパラメータを抽出するためにString.prototype.split()を使用します。
3. URLSearchParamsコンストラクタを使用してオブジェクトを作成し、スプレッド演算子 (...) を使用してキーと値のペアの配列に変換します。
4. キーと値のペアの配列をオブジェクトに変換するためにArray.prototype.reduce()を使用します。

クエリ文字列を変換するコードは次のとおりです。

const queryStringToObject = (url) =>
  [...new URLSearchParams(url.split("?")[1])].reduce(
    (a, [k, v]) => ((a[k] = v), a),
    {}
  );

使用例：

queryStringToObject("https://google.com?page=1&count=10");
// {page: '1', count: '10'}

まとめ

おめでとうございます！クエリ文字列をオブジェクトに変換する実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。