Введение
В этом практическом занятии мы изучим, как преобразовать строку цвета hsl() в объект с отдельными значениями для оттенка, насыщенности и яркости. Мы будем использовать манипуляцию строками и методы массивов для извлечения числовых значений и сохранения их в новый объект с именованными свойствами. В конце этого практического занятия вы будете лучше понимать, как работать с значениями цвета в JavaScript.
Преобразование HSL в объект
Для преобразования строки цвета hsl() в объект с числовыми значениями каждого цвета следуйте этим шагам:
- Откройте Терминал/SSH и введите
node, чтобы начать практиковаться в написании кода. - Используйте
String.prototype.match(), чтобы получить массив из 3 строк с числовыми значениями. - Преобразуйте строки в массив числовых значений с использованием
Array.prototype.map()в сочетании сNumber. - Сохраните значения в именованные переменные с использованием деструктуризации массива.
- Создайте соответствующий объект из именованных переменных.
const toHSLObject = (hslStr) => {
const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
return { hue, saturation, lightness };
};
Пример использования:
toHSLObject("hsl(50, 10%, 10%)"); // { hue: 50, saturation: 10, lightness: 10 }
Резюме
Поздравляем! Вы завершили практическое занятие по преобразованию HSL в объект. Вы можете выполнить больше практических заданий в LabEx, чтобы улучшить свои навыки.