HSL 을 배열로 변환하기

소개

이 랩에서는 JavaScript 를 사용하여 hsl() 색상 문자열을 값 배열로 변환하는 방법을 살펴봅니다. 정규 표현식 (regular expressions) 과 배열 메서드를 조합하여 문자열에서 숫자 값을 추출하고 이를 숫자 값의 배열로 변환합니다. 이 랩은 JavaScript 에서 색상 값을 사용하는 방법을 이해하고 정규 표현식과 배열 조작 기술을 향상시키는 데 도움이 될 것입니다.

HSL 을 배열로 변환하기

hsl() 색상 문자열을 값 배열로 변환하려면 다음 단계를 따르세요.

1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
2. String.prototype.match()를 사용하여 숫자 값을 가진 3 개의 문자열 배열을 가져옵니다.
3. Array.prototype.map()을 Number와 함께 사용하여 숫자 값의 배열로 변환합니다.

다음은 hsl() 색상 문자열을 숫자 값의 배열로 변환하는 코드입니다.

const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

사용 예시:

toHSLArray("hsl(50, 10%, 10%)"); // [50, 10, 10]

요약

축하합니다! HSL 을 배열로 변환하는 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.