Conversion de HSL en Objet

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 convertir une chaîne de caractères de couleur hsl() en un objet avec des valeurs individuelles pour la teinte, la saturation et la luminosité. Nous allons utiliser la manipulation de chaînes de caractères et les méthodes d'itération pour extraire les valeurs numériques et les stocker dans un nouvel objet avec des propriétés nommées. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de travailler avec les valeurs de couleur en JavaScript.


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") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28652{{"Conversion de HSL en Objet"}} javascript/data_types -.-> lab-28652{{"Conversion de HSL en Objet"}} javascript/arith_ops -.-> lab-28652{{"Conversion de HSL en Objet"}} javascript/comp_ops -.-> lab-28652{{"Conversion de HSL en Objet"}} javascript/higher_funcs -.-> lab-28652{{"Conversion de HSL en Objet"}} javascript/destr_assign -.-> lab-28652{{"Conversion de HSL en Objet"}} end

Conversion de HSL en Objet

Pour convertir une chaîne de caractères de couleur hsl() en un objet avec les valeurs numériques de chaque couleur, suivez ces étapes :

  • Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  • Utilisez String.prototype.match() pour obtenir un tableau de 3 chaînes de caractères avec les valeurs numériques.
  • Convertissez les chaînes de caractères en un tableau de valeurs numériques en utilisant Array.prototype.map() en combinaison avec Number.
  • Stockez les valeurs dans des variables nommées en utilisant la désagrégation de tableau.
  • Créez un objet approprié à partir des variables nommées.
const toHSLObject = (hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
  return { hue, saturation, lightness };
};

Utilisation de l'exemple :

toHSLObject("hsl(50, 10%, 10%)"); // { hue: 50, saturation: 10, lightness: 10 }

Résumé

Félicitations ! Vous avez terminé le laboratoire sur la conversion de HSL en objet. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.