LabEx
EntrarÚnete

De HSL a Objeto

Beginner

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

Introducción

En este laboratorio, exploraremos cómo convertir una cadena de color hsl() en un objeto con valores individuales para matiz, saturación y luminosidad. Utilizaremos manipulación de cadenas y métodos de arrays para extraer los valores numéricos y almacenarlos en un nuevo objeto con propiedades con nombre. Al final de este laboratorio, tendrás una mejor comprensión de cómo trabajar con valores de color en JavaScript.

Conversión de HSL a Objeto

Para convertir una cadena de color hsl() en un objeto con los valores numéricos de cada color, siga estos pasos:

  • Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
  • Utilice String.prototype.match() para obtener una matriz de 3 cadenas con los valores numéricos.
  • Convierta las cadenas en una matriz de valores numéricos utilizando Array.prototype.map() en combinación con Number.
  • Almacene los valores en variables con nombre utilizando la desestructuración de arrays.
  • Cree un objeto adecuado a partir de las variables con nombre.
const toHSLObject = (hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
  return { hue, saturation, lightness };
};

Uso de ejemplo:

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

Resumen

¡Felicitaciones! Has completado el laboratorio de conversión de HSL a objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.