Parlons des méthodes de conversion mutuelle des paramètres d'URL et des objets JS

Dans le processus de développement front-end, nous rencontrons souvent des situations où les paramètres d'URL et les objets en JavaScript doivent être convertis les uns aux autres. Par exemple, lorsque nous devons utiliser des paramètres de requête d'URL pour contrôler le comportement de la page, nous devons analyser les paramètres d'URL en objets en JavaScript pour le fonctionnement ou lorsque nous devons transmettre certaines données de la page au serveur. pour convertir l'objet en paramètres URL pour la demande.

Cet article présentera les méthodes de conversion mutuelle entre les paramètres d'URL et les objets en JavaScript, et fournira quelques exemples de code pratiques.

1. Conversion des paramètres d'URL en objets JavaScript

Pour convertir les paramètres d'URL en objets JavaScript, nous devons d'abord analyser les paramètres d'URL en une chaîne, puis les analyser en un objet.

1.1 Analyser les paramètres d'URL sous forme de chaînes

Nous pouvons utiliser la méthode window.location.search en JavaScript pour obtenir les paramètres de requête dans l'URL de la page actuelle. La chaîne renvoyée par cette méthode contient tout ce qui se trouve après ? dans l'URL, mais n'inclut pas # et les paramètres d'ancrage qui le suivent. 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"}。

2. 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

Ce qui suit est un exemple de code pour obtenir les paramètres de requête de l'URL de la page actuelle :

rrreee

Si nous voulons obtenir les paramètres de requête dans l'URL d'autres pages, nous pouvons utiliser le nouvelle URL(urlString). search, qui sera nécessaire. Il suffit de transmettre l'URL analysée. Par exemple : 🎜rrreee🎜1.2 Analyser les paramètres de requête en objets 🎜🎜Ensuite, nous devons analyser la chaîne de paramètres de requête en objets en JavaScript. Nous pouvons écrire manuellement une fonction d'analyse, mais il est recommandé d'utiliser la bibliothèque tierce query-string, qui fournit des méthodes d'analyse pratiques. 🎜🎜Tout d'abord, nous devons utiliser npm ou Yarn pour ajouter la bibliothèque query-string au projet : 🎜rrreee🎜Ensuite, nous pouvons utiliser la méthode parse fournie dans la bibliothèque , convertissez la chaîne de paramètres de requête URL en objet. Par exemple : 🎜rrreee🎜où values est un objet analysé. Par exemple, si queryString est "?name=John&age=20", alors values est {name : "John", age : "20">. 🎜

🎜Convertir des objets JavaScript en paramètres d'URL🎜🎜🎜Lorsque nous devons convertir des objets en JavaScript en paramètres d'URL, nous devons épisser chaque paire clé-valeur de l'objet pour former une URL Une chaîne de paramètres de requête. 🎜🎜2.1 Convertir un objet en chaîne🎜🎜Nous pouvons écrire manuellement une fonction de conversion, d'abord parcourir toutes les paires clé-valeur de l'objet, les convertir au format "clé = valeur", puis les connecter avec le symbole "&". Par exemple : 🎜rrreee🎜Notez que nous utilisons la méthode encodeURIComponent lors de l'encodage de chaque paire clé-valeur dans une chaîne. Cette méthode peut coder des caractères spéciaux dans la chaîne pour empêcher les paramètres de requête d'URL illégaux. Par exemple, si la paire clé-valeur contient un caractère spécial « ? », elle sera convertie en une chaîne codée telle que « %3F ». 🎜🎜2.2 Ajouter une chaîne à l'URL🎜🎜Maintenant que nous avons converti l'objet JavaScript en chaîne, la tâche suivante consiste à l'ajouter à l'URL. 🎜🎜Si nous souhaitons modifier directement les paramètres de requête dans l'URL de la fenêtre actuelle, nous pouvons utiliser l'attribut window.location.search pour le modifier. Par exemple : 🎜rrreee🎜Si nous voulons construire une nouvelle URL et sauter, nous pouvons utiliser la propriété window.location.href ou la méthode window.location.replace. Par exemple : 🎜rrreee🎜Notez qu'ici, nous devons assembler nous-mêmes l'URL complète au lieu de simplement utiliser window.location.search. Étant donné que l'attribut search ne renverra que la partie paramètre de requête de l'URL actuelle, nous devons également séparer manuellement le nom d'hôte, le nom de chemin, les paramètres d'ancrage, etc. 🎜🎜Résumé🎜🎜Cet article présente la méthode de conversion mutuelle des paramètres et des objets d'URL en JavaScript. Nous pouvons obtenir les paramètres de requête dans l'URL via la méthode location.search et utiliser la bibliothèque query-string pour analyser la chaîne de paramètre de requête dans un objet JavaScript. Inversement, nous pouvons également écrire manuellement une fonction d'assistance pour convertir l'objet JavaScript en chaîne de paramètres de requête et l'ajouter à l'URL. 🎜🎜Les opérations ci-dessus sont très simples, mais elles sont souvent utilisées dans le développement front-end réel. J'espère que cela pourra aider les lecteurs. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!