Hex 값 확장

소개

이 랩에서는 JavaScript 를 사용하여 3 자리 색상 코드를 6 자리 색상 코드로 확장하는 방법을 살펴봅니다. map(), split(), join()과 같은 Array 메서드와 문자열 시작 부분에 #이 있는 경우 slice()를 사용하여 제거하는 방법을 사용할 것입니다. 이 랩은 원하는 출력을 얻기 위해 JavaScript 에서 문자열과 배열을 조작하는 방법을 이해하는 데 도움이 될 것입니다.

3 자리 색상 코드를 6 자리 색상 코드로 확장하는 방법

코딩 연습을 위해 터미널/SSH 를 열고 node를 입력하세요. 다음 함수를 사용하여 3 자리 색상 코드를 6 자리 색상 코드로 확장할 수 있습니다.

const extendHex = (shortHex) =>
  "#" +
  shortHex
    .slice(shortHex.startsWith("#") ? 1 : 0)
    .split("")
    .map((x) => x + x)
    .join("");

3 자리 RGB 표기법의 16 진수 색상 코드를 6 자리 형식으로 변환하려면 다음 단계를 따르세요.

• Array.prototype.map(), String.prototype.split(), Array.prototype.join()을 사용하여 매핑된 배열을 결합합니다.
• #이 한 번 추가되므로 Array.prototype.slice()를 사용하여 문자열 시작 부분에서 #을 제거합니다.

다음은 몇 가지 예입니다.

extendHex("#03f"); // '#0033ff'
extendHex("05a"); // '#0055aa'

요약

축하합니다! Hex 값 확장 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.