URL-Parameter als Objekt

JavaScriptJavaScriptBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir untersuchen, wie man URL-Parameter extrahiert und in ein JavaScript-Objekt abbildet, indem man reguläre Ausdrücke und Array-Methoden verwendet. Wir werden lernen, wie man String.prototype.match() verwendet, um alle Schlüssel-Wert-Paare zu erhalten, und Array.prototype.reduce(), um sie in ein einzelnes Objekt umzuwandeln. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man mit URLs umgeht und nützliche Informationen daraus extrahiert.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced 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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28364{{"URL-Parameter als Objekt"}} javascript/data_types -.-> lab-28364{{"URL-Parameter als Objekt"}} javascript/arith_ops -.-> lab-28364{{"URL-Parameter als Objekt"}} javascript/comp_ops -.-> lab-28364{{"URL-Parameter als Objekt"}} javascript/higher_funcs -.-> lab-28364{{"URL-Parameter als Objekt"}} end

Objekt mit URL-Parametern

Um ein Objekt zu erstellen, das die Parameter der aktuellen URL enthält, folgen Sie diesen Schritten:

  1. Öffnen Sie das Terminal/SSH und geben Sie node ein, um mit der Code-Praxis zu beginnen.
  2. Verwenden Sie String.prototype.match() mit einem passenden regulären Ausdruck, um alle Schlüssel-Wert-Paare zu extrahieren.
  3. Verwenden Sie Array.prototype.reduce(), um sie in ein einzelnes Objekt zuzuordnen und zu kombinieren.
  4. Geben Sie location.search als Argument, um es auf die aktuelle URL anzuwenden.

Hier ist der Code:

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

Sie können diese Funktion mit jeder URL verwenden, um ein Objekt mit ihren Parametern zu erhalten. Hier sind einige Beispiele:

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

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "URL-Parameter als Objekt" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.