Heim > Artikel > Web-Frontend > Lassen Sie uns über die gegenseitigen Konvertierungsmethoden von URL-Parametern und JS-Objekten sprechen
Lassen Sie uns über die gegenseitigen Konvertierungsmethoden von URL-Parametern und JS-Objekten sprechen
- PHPzOriginal
- 2023-04-06 09:07:432419Durchsuche
Im Prozess der Frontend-Entwicklung stoßen wir häufig auf Situationen, in denen URL-Parameter und Objekte in JavaScript ineinander konvertiert werden müssen. Wenn wir beispielsweise URL-Abfrageparameter verwenden müssen, um das Verhalten der Seite zu steuern, müssen wir die URL-Parameter für den Betrieb in Objekte in JavaScript analysieren oder wenn wir einige Daten auf der Seite an den Server übergeben müssen um das Objekt für die Anfrage in URL-Parameter umzuwandeln.
In diesem Artikel werden die gegenseitigen Konvertierungsmethoden zwischen URL-Parametern und Objekten in JavaScript vorgestellt und einige praktische Codebeispiele bereitgestellt.
- URL-Parameter in JavaScript-Objekte konvertieren
Um URL-Parameter in JavaScript-Objekte zu konvertieren, müssen wir zunächst die URL-Parameter in eine Zeichenfolge und diese dann in ein Objekt analysieren.
1.1 URL-Parameter als Zeichenfolgen analysieren
Wir können die Methode window.location.search in JavaScript verwenden, um die Abfrageparameter in der aktuellen Seiten-URL abzurufen. Die von dieser Methode zurückgegebene Zeichenfolge enthält alles nach ? in der URL, jedoch nicht # und die darauf folgenden Ankerparameter. window.location.search 方法来获取当前页面 URL 中的查询参数。这个方法返回的字符串包含了 URL 中 ? 之后的所有内容，但不包括 # 以及其后面的锚点参数。
以下是一个获取当前页面 URL 查询参数的示例代码：
const queryString = window.location.search;
如果我们希望获取其他页面 URL 中的查询参数，可以使用 new URL(urlString).search 方法，将需要解析的 URL 传入即可。例如：
const url = "https://example.com/page/?name=John&age=20"; const queryString = new URL(url).search; // 返回"?name=John&age=20"
1.2 解析查询参数为对象
接下来，我们需要将查询参数的字符串解析为 JavaScript 中的对象。我们可以手动编写一个解析函数，但是这里推荐使用第三方库 query-string，该库提供了一些便捷的解析方法。
首先，我们需要使用 npm 或 yarn 来将 query-string 库添加至项目中：
npm install query-string --save # 或者 yarn add query-string
然后我们便可以使用该库中提供的 parse 方法，将 URL 查询参数的字符串转化为对象。例如：
import queryString from 'query-string'; const values = queryString.parse(queryString);
其中，values 就是一个解析后的对象。例如，如果 queryString 为 "?name=John&age=20"，那么 values 就为 {name: "John", age: "20"}。
- JavaScript 对象转化为 URL 参数
当我们需要将 JavaScript 中的对象转化为 URL 参数时，我们需要将对象中的每个键值对进行拼接，形成一个 URL 查询参数的字符串。
2.1 将对象转化为字符串
我们可以手动编写一个转化函数，首先遍历对象中的所有键值对，将它们转化为 "key=value" 格式，然后用 "&" 符号连接起来。例如：
function toQueryString(obj) {
const parts = [];
for (const [key, value] of Object.entries(obj)) {
parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
}
return parts.join('&');
}
const values = {
name: "John",
age: 20
};
const queryString = toQueryString(values);
// 返回 "name=John&age=20"
注意，我们在将每个键值对编码为字符串时，使用了 encodeURIComponent 方法。这个方法可以将字符串中的特殊字符进行编码，防止出现非法的 URL 查询参数。例如，如果键值对中包含一个特殊字符 "?", 它会被转换为 "%3F" 这样的编码字符串。
2.2 将字符串添加到 URL 中
现在我们已经将 JavaScript 对象转化为了一个字符串，接下来的任务就是将它加入到 URL 中。
如果我们要直接修改当前窗口 URL 中的查询参数，可以使用 window.location.search 属性来修改。例如：
const queryString = toQueryString(values); window.location.search = queryString;
如果我们是要构造一个新的 URL，并进行跳转，可以使用 window.location.href 属性或者 window.location.replace 方法。例如：
const queryString = toQueryString(values);
const url = `https://example.com/page/?${queryString}`;
window.location.href = url;
// 或者
window.location.replace(url);
注意，这里我们需要自己拼接完整的 URL，而不能简单地使用 window.location.search。因为 search 属性只会返回当前 URL 中的查询参数部分，我们还需要手动拼接主机名、路径名以及锚点参数等。
总结
本文介绍了 URL 参数和 JavaScript 中对象的相互转化方法。我们可以通过 location.search 方法获取 URL 中的查询参数，并使用 query-string
rrreee
Wenn wir die Abfrageparameter in der URL anderer Seiten abrufen möchten, können wir dennew URL(urlString) verwenden. search-Methode, die benötigt wird. Übergeben Sie einfach die analysierte URL. Zum Beispiel: 🎜rrreee🎜1.2 Abfrageparameter in Objekte analysieren 🎜🎜Als nächstes müssen wir die Zeichenfolge der Abfrageparameter in JavaScript in Objekte analysieren. Wir können eine Parsing-Funktion manuell schreiben, es wird jedoch empfohlen, die Bibliothek query-string eines Drittanbieters zu verwenden, die einige praktische Parsing-Methoden bietet. 🎜🎜Zuerst müssen wir npm oder Yarn verwenden, um die query-string-Bibliothek zum Projekt hinzuzufügen: 🎜rrreee🎜Dann können wir die in der Bibliothek bereitgestellte parse-Methode verwenden , konvertieren Sie die Zeichenfolge der URL-Abfrageparameter in ein Objekt. Zum Beispiel: 🎜rrreee🎜wobei values ein analysiertes Objekt ist. Wenn beispielsweise queryString "?name=John&age=20" ist, dann ist values {name: "John", Alter : "20". 🎜- 🎜JavaScript-Objekte in URL-Parameter konvertieren🎜🎜🎜Wenn wir Objekte in JavaScript in URL-Parameter konvertieren müssen, müssen wir jedes Schlüssel-Wert-Paar im Objekt zusammenfügen, um eine URL-A-Zeichenfolge zu bilden Abfrageparameter. 🎜🎜2.1 Objekt in String konvertieren🎜🎜Wir können manuell eine Konvertierungsfunktion schreiben, zunächst alle Schlüssel-Wert-Paare im Objekt durchlaufen, sie in das „Schlüssel=Wert“-Format konvertieren und sie dann mit dem „&“-Symbol verbinden. Zum Beispiel: 🎜rrreee🎜Beachten Sie, dass wir die Methode
encodeURIComponent verwenden, wenn wir jedes Schlüssel-Wert-Paar in eine Zeichenfolge kodieren. Diese Methode kann Sonderzeichen in der Zeichenfolge kodieren, um illegale URL-Abfrageparameter zu verhindern. Wenn das Schlüssel-Wert-Paar beispielsweise das Sonderzeichen „?“ enthält, wird es in eine codierte Zeichenfolge wie „%3F“ konvertiert. 🎜🎜2.2 Fügen Sie der URL einen String hinzu🎜🎜Da wir nun das JavaScript-Objekt in einen String konvertiert haben, besteht die nächste Aufgabe darin, es der URL hinzuzufügen. 🎜🎜Wenn wir die Abfrageparameter in der aktuellen Fenster-URL direkt ändern möchten, können wir sie mit dem Attribut window.location.search ändern. Zum Beispiel: 🎜rrreee🎜Wenn wir eine neue URL erstellen und springen möchten, können wir die Eigenschaft window.location.href oder die Methode window.location.replace verwenden. Zum Beispiel: 🎜rrreee🎜Beachten Sie, dass wir hier die vollständige URL selbst zusammenfügen müssen, anstatt einfach window.location.search zu verwenden. Da das Attribut search nur den Abfrageparameterteil der aktuellen URL zurückgibt, müssen wir auch den Hostnamen, den Pfadnamen, die Ankerparameter usw. manuell zusammenfügen. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird die Methode der gegenseitigen Konvertierung von URL-Parametern und -Objekten in JavaScript vorgestellt. Wir können die Abfrageparameter in der URL über die Methode location.search abrufen und die Bibliothek query-string verwenden, um die Abfrageparameterzeichenfolge in ein JavaScript-Objekt zu analysieren. Umgekehrt können wir auch manuell eine Hilfsfunktion schreiben, um das JavaScript-Objekt in eine Abfrageparameterzeichenfolge umzuwandeln und sie der URL hinzuzufügen. 🎜🎜Die oben genannten Vorgänge sind sehr einfach, werden aber häufig in der tatsächlichen Front-End-Entwicklung verwendet. Ich hoffe, dass sie den Lesern helfen können. 🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über die gegenseitigen Konvertierungsmethoden von URL-Parametern und JS-Objekten sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!