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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/SecurityGroup(["Security"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/SecurityGroup -.-> javascript/web_sec("Web Security Basics") subgraph Lab Skills javascript/variables -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/data_types -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/arith_ops -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/comp_ops -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/array_methods -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/higher_funcs -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/spread_rest -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} javascript/web_sec -.-> lab-28565{{"クエリ文字列をオブジェクトに変換する"}} end

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

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

ターミナル/SSHを開き、コーディングを練習するためにnodeと入力します。
与えられたurlからパラメータを抽出するためにString.prototype.split()を使用します。
URLSearchParamsコンストラクタを使用してオブジェクトを作成し、スプレッド演算子 (...) を使用してキーと値のペアの配列に変換します。
キーと値のペアの配列をオブジェクトに変換するために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でさらに多くの実験を行って練習してください。