オブジェクトとしての URL パラメータ

はじめに

この実験では、正規表現と配列メソッドを使ってURLパラメータを抽出し、JavaScriptオブジェクトにマッピングする方法を探ります。String.prototype.match() を使ってすべてのキーバリューペアを取得し、Array.prototype.reduce() を使ってそれらを単一のオブジェクトに変換する方法を学びます。この実験が終わるとき、URLを操作し、そこから有用な情報を抽出する方法をより深く理解しているでしょう。

Skills Graph

URLパラメータを持つオブジェクト

現在のURLのパラメータを含むオブジェクトを作成するには、次の手順に従います。

1. ターミナル/SSHを開き、コーディングの練習を始めるために node と入力します。
2. 適切な正規表現を使って String.prototype.match() を使ってすべてのキーバリューペアを抽出します。
3. Array.prototype.reduce() を使ってそれらをマッピングし、単一のオブジェクトに結合します。
4. 現在のURLに適用するために引数として location.search を渡します。

以下がコードです。

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
    ),
    {}
  );

この関数を使って任意のURLを使ってそのパラメータを持つオブジェクトを取得することができます。以下はいくつかの例です。

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam', surname: 'Smith'}

まとめ

おめでとうございます！あなたはURLパラメータをオブジェクトとしての実験を完了しました。あなたのスキルを向上させるためにLabExでさらに実験を練習することができます。