Conversion d'un objet en chaîne de requête

JavaScriptJavaScriptBeginner
Pratiquer maintenant

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

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer la manière de générer une chaîne de requête à partir des paires clé-valeur d'un objet à l'aide de JavaScript. Nous utiliserons la méthode Array.prototype.reduce() sur Object.entries() pour créer la chaîne de requête et déterminer le symbole approprié à utiliser en fonction de la longueur de la queryString. À la fin de ce laboratoire, vous serez capable de générer efficacement une chaîne de requête pour vos applications web.


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/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/data_types -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/arith_ops -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/comp_ops -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/obj_manip -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/higher_funcs -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/destr_assign -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} javascript/template_lit -.-> lab-28524{{"Conversion d'un objet en chaîne de requête"}} end

Conversion d'un objet en chaîne de requête

Pour convertir un objet en chaîne de requête, utilisez la fonction objectToQueryString() qui génère une chaîne de requête à partir des paires clé-valeur de l'objet donné.

La fonction fonctionne comme suit :

  • Elle utilise Array.prototype.reduce() sur Object.entries() pour créer la chaîne de requête à partir de queryParameters.
  • Elle détermine le symbole à utiliser soit ? soit & en fonction de la longueur de queryString.
  • Elle concatène val à queryString seulement si c'est une chaîne de caractères.
  • Elle renvoie la queryString ou une chaîne de caractères vide lorsque les queryParameters sont fausses.

Voici le code de la fonction objectToQueryString() :

const objectToQueryString = (queryParameters) => {
  return queryParameters
    ? Object.entries(queryParameters).reduce(
        (queryString, [key, val], index) => {
          const symbol = queryString.length === 0 ? "?" : "&";
          queryString +=
            typeof val === "string" ? `${symbol}${key}=${val}` : "";
          return queryString;
        },
        ""
      )
    : "";
};

Utilisation de l'exemple de la fonction objectToQueryString() :

objectToQueryString({ page: "1", size: "2kg", key: undefined }); // renvoie '?page=1&size=2kg'

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la conversion d'un objet en chaîne de requête. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.