So erhalten Sie URL -Parameter mit JavaScript

URL -Parameter (auch als Abfrage -Zeichenfolgenparameter oder URL -Variablen bezeichnet) werden verwendet, um kleine Datenmengen zwischen den Seiten oder zwischen dem Client und dem Server über URL zu senden. Sie können verschiedene nützliche Informationen enthalten, z. B. Suchanfragen, Verknüpfungsempfehlungen, Produktinformationen, Benutzerpräferenzen und mehr.

Dieser Artikel zeigt Ihnen, wie Sie URL -Parameter mit JavaScript analysieren und manipulieren.

Schlüsselpunkte

• URL -Parameter oder Parameter von Abfragestönen werden verwendet, um kleine Datenmengen zwischen Seiten oder zwischen Clients und Servern über URLs zu senden und können nützliche Informationen wie Suchanfragen, Linkempfehlungen, Produktinformationen, Benutzereinstellungen usw. enthalten.
• Die Benutzeroberfläche von urlSearchParams in modernen Browsern ermöglicht eine einfache Parsen und Manipulation von URL -Parametern, einschließlich: get(), um den ersten Wert zurückzugeben, der einem bestimmten Suchparameter zugeordnet ist. Wird verwendet, um alle Werte zurückzugeben, die einem bestimmten Parameter zugeordnet sind. has() getAll() Für ältere Browser kann Polyfill verwendet werden, oder Entwickler können ihre eigene Abfrage -Zeichenfolge -Parsen -Funktion erstellen, die die Abfragezeichenfolge der URL empfängt und die Daten im Objektformat zurückgibt.
• Es ist wichtig zu beachten, dass das URL -Parameterformat nicht klar definiert ist und variieren kann, und Entwickler sollten den Code basierend auf bestimmten Anwendungsfällen testen und anpassen. Wenn Sie URLs besser manipulieren müssen, können Sie bestimmte Bibliotheken wie Abfragestring und medialisieren Sie Uri.js.

Nutzen Sie URL -Parameter

Dies ist in modernen Browsern dank der Benutzeroberfläche urlSearchparams viel einfacher geworden. Es definiert eine Reihe von Versorgungsmethoden, um Abfragebräge für URLs zu verarbeiten.

Angenommen, unsere URL ist

, wir können

verwenden, um die Abfragezeichenfolge zu erhalten: https://example.com/?product=shirt&color=blue&newuser&size=m window.location.search

Dann können wir die Parameter der Abfragezeichenfolge mithilfe von UrlSearchParams analysieren:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

wir können dann eine seiner Methoden für das Ergebnis aufrufen.

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

Zum Beispiel wird

den ersten Wert zurückgeben, der dem angegebenen Suchparameter zugeordnet ist:

URLSearchParams.get()

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

Andere nützliche Methoden

Überprüfen Sie, ob die Parameter

vorhanden sind

Sie können

verwenden, um zu überprüfen, ob ein bestimmter Parameter vorhanden ist:

URLSearchParams.has()

Holen Sie sich alle Werte des Parameters

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

Sie können

verwenden, um alle Werte zurückzugeben, die einem bestimmten Parameter zugeordnet sind:

URLSearchParams.getAll()

Iterationsparameter

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

urlSearchParams liefert auch einige häufig verwendete Objekt -Iterator -Methoden, mit denen Sie über seine Schlüssel, Werte und Einträge iterieren können:

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Browser -Unterstützung

Die Browser -Unterstützung für UrlSearchparams ist gut. Zum Zeitpunkt des Schreibens wird es von allen großen Browsern unterstützt.

Wenn Sie ältere Browser (z. B. Internet Explorer) unterstützen müssen, können Sie Polyfill verwenden. oder können Sie den Rest dieses Tutorials weiter lesen und lernen, wie man selbst einen schreibt.

Schreiben Sie Ihre eigene Abfrage -String -Analyse -Funktion

Lassen Sie uns die im vorherigen Abschnitt verwendete URL fortsetzen:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Dies ist eine Funktion, die alle URL -Parameter als prägnantes Objekt liefert:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

Sie werden sehen, wie es bald funktioniert, aber zuerst finden Sie hier einige Verwendungsbeispiele:

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

(Der Codepen -Demonstrationsteil wird hier weggelassen, da CodePen -Code nicht direkt eingebettet werden kann)

Dinge zu wissen, bevor Sie diese Funktion verwenden

• Unsere Funktion geht davon aus, dass die Parameter durch & Zeichen getrennt sind, wie in der W3C -Spezifikation gezeigt. Das URL -Parameterformat ist jedoch normalerweise nicht gut definiert, sodass Sie gelegentlich ; oder & als Grenzwerte sehen können.
• Wenn der Parameter kein gleiches Vorzeichen hat oder ein gleiches Vorzeichen hat, aber keinen Wert hat, ist unsere Funktion immer noch gültig.
• Die Werte der sich wiederholenden Parameter werden im Array platziert.

Wenn Sie nur eine Funktion benötigen, die Sie in Ihren Code einfügen können, ist dies jetzt erledigt. Wenn Sie verstehen möchten, wie eine Funktion funktioniert, lesen Sie weiter.

Der nächste Abschnitt geht davon aus, dass Sie einige JavaScript verstehen, einschließlich Funktionen, Objekten und Arrays. Wenn Sie eine Überprüfung benötigen, lesen Sie die MDN JavaScript -Referenz.

Wie funktioniert die Funktion

im Allgemeinen nimmt diese Funktion die Abfragezeichenfolge der URL (den Teil nach dem Fragezeichen ? und vor der Pfundmarke #) und gibt die Daten in einem präzisen Objektformular aus.

Zuallererst bedeutet diese Codezeile, dass wir nach dem Fragezeichen alles erhalten, wenn wir eine URL angeben, nur die URL des Fensters verwenden:

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

Als nächstes erstellen wir ein Objekt, um unsere Parameter zu speichern:

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

Wenn eine Abfragezeichenfolge vorliegt, werden wir damit beginnen, sie zu analysieren. Zunächst müssen wir sicherstellen, dass das Teil, das mit # beginnt

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Jetzt können wir die Abfragezeichenfolge in seine Komponenten aufteilen:

<code>http://example.com/?product=shirt&color=blue&newuser&size=m</code>

Dies gibt uns ein Array, wie unten gezeigt:

<code class="language-javascript">function getAllUrlParams(url) {
  // 从url（可选）或窗口获取查询字符串
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // 我们将在这里存储参数
  var obj = {};

  // 如果存在查询字符串
  if (queryString) {
    // #后面的内容不是查询字符串的一部分，所以去掉它
    queryString = queryString.split('#')[0];

    // 将查询字符串拆分为其组成部分
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // 分离键和值
      var a = arr[i].split('=');

      // 设置参数名称和值（如果为空则使用'true'）
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // （可选）保持大小写一致
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // 如果paramName以方括号结尾，例如colors[]或colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {
        // 如果不存在，则创建键
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // 如果它是索引数组，例如colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // 获取索引值并在适当的位置添加条目
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // 否则将值添加到数组的末尾
          obj[key].push(paramValue);
        }
      } else {
        // 我们正在处理字符串
        if (!obj[paramName]) {
          // 如果不存在，则创建属性
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string') {
          // 如果属性存在并且是字符串，则将其转换为数组
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // 否则添加属性
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}</code>

Als nächstes werden wir dieses Array über dieses Array iterieren und jedes Element in Schlüssel und Werte aufteilen, die wir bald in unser Objekt einfügen:

<code class="language-javascript">getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'</code>

Lassen Sie uns einer einzelnen Variablen Schlüssel und Werte zuweisen. Wenn es keinen Parameterwert gibt, setzen wir ihn auf

fest, um anzuzeigen, dass der Parametername existiert. Sie können diese Einstellung nach Ihrem Anwendungsfall ändern: true

<code class="language-javascript">var queryString = url ? url.split('?')[1] : window.location.search.slice(1);</code>

optional können Sie alle Parameternamen und Werte auf Kleinbuchstaben festlegen. Auf diese Weise können Sie Situationen vermeiden, in denen jemand den Datenverkehr an die URL sendet, z. B.

anstelle von example=TRUE und Ihr Skript bricht. (Ich habe dies gesehen.) Wenn Ihre Abfragebarstellung für Fall sensibel sein muss, können Sie diesen Teil nach Belieben weglassen: example=true

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Als nächstes müssen wir verschiedene Arten von Eingängen verarbeiten, die wir in paramName erhalten können. Dies könnte ein indiziertes Array, ein nicht indiziertes Array oder eine normale Zeichenfolge sein.

Wenn es sich um ein Indexarray handelt, möchten wir, dass das entsprechende paramValue ein Array ist und den Wert in die richtige Position einfügt. Wenn es sich um ein nicht indiziertes Array handelt, möchten wir, dass das entsprechende paramValue ein Array sein und die Elemente hineinschieben. Wenn es sich um eine Zeichenfolge handelt, möchten wir eine reguläre Eigenschaft für das Objekt erstellen und ihm paramValue zuweisen, es sei denn Drücken Sie das in in dieses Array übergeben. paramValue paramValue Um dies zu veranschaulichen, gibt es hier einige Beispieleingaben und die Ausgabe, die wir erwarten:

Dies ist der Code, der diese Funktion implementiert:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

Schließlich geben wir unser Objekt zurück, das die Parameter und Werte enthält.

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

Wenn Ihre URL codierte Sonderzeichen wie Leerzeichen hat (codiert als

), können Sie sie auch dekodieren, um den ursprünglichen Wert wie unten gezeigt zu erhalten:

🎜> achten Sie einfach darauf, nicht zu dekodieren, was dekodiert wurde, oder Ihr Skript wird schief gehen, insbesondere wenn Prozentsätze beteiligt sind.

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

Wie auch immer, herzlichen Glückwunsch! Jetzt wissen Sie, wie Sie URL -Parameter erhalten und hoffen, andere Tipps auf dem Weg zu lernen.

Schlussfolgerung

Der Code in diesem Artikel ist für die meisten häufigsten Anwendungsfälle geeignet, in denen Sie URL -Abfrageparameter erhalten. Wenn Sie sich mit Randfällen wie ungewöhnlichen Separatoren oder Sonderformaten befassen, testen Sie und passen Sie sie entsprechend an.

Wenn Sie mehr mit der URL tun möchten, können Sie bestimmte Bibliotheken wie Abfrage-String und medialisieren Sie Uri.js. Da es sich jedoch im Grunde genommen um eine String -Operation handelt, ist es sinnvoller, pure JavaScript im Allgemeinen zu verwenden. Egal, ob Sie Ihren eigenen Code verwenden oder eine Bibliothek verwenden, überprüfen Sie alles und stellen Sie sicher, dass er für Ihren Anwendungsfall funktioniert.

Wenn Sie gerne mit Saiten spielen, lesen Sie unseren Artikel zum Aufteilen von Zeichenfolgen in Substrings, konvertieren Strings in Zahlen und konvertieren Zahlen in Zeichenfolgen und Ordnungszahlen. Für ein umfassenderes JavaScript-Wissen finden Sie unser Buch "JavaScript: From Newbie zu Ninja, Second Edition".

(Der FAQS -Teil wird hier weggelassen, da der Inhalt stark vom Text dupliziert wird)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie URL -Parameter mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!