Conversion de HSL en Objet

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

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.