부호 전파 오른쪽 시프트 비트 연산자 (>>)는 다음 JavaScript 표현식으로 설명 할 수 있습니다.

(A >> B) => Math.floor(A / (2 ** B)) => Math.floor(A / Math.pow(2, B))

따라서 이전 예제를 다시 살펴보십시오.

(170 >> 3) => Math.floor(170 / (2 ** 3)) => Math.floor(170 / 8) => 21
(-170 >> 3) => Math.floor(-170 / (2 ** 3)) => Math.floor(-170 / 8) => -22

색 추출 

올바른 시프트 (>>) 연산자를 매우 잘 적용하는 것은 색상에서 RGB 색상 값을 추출하는 것입니다. 색상이 RGB로 표시되면 빨강, 녹색 및 파랑 구성 요소 값을 쉽게 구분할 수 있습니다. 그러나 16 진수로 표시되는 색상에는 약간의 노력이 필요합니다.

이전 섹션에서는 개별 구성 요소의 비트 (빨강, 녹색 및 파랑)의 비트에서 색상 비트를 구성하는 절차를 보았습니다. 이 절차를 거꾸로 진행하면 색상의 개별 구성 요소 값을 추출 할 수 있습니다. 한 번 봅시다.

16 진수 표기법 # ff2314로 표시되는 색상이 있다고 가정하겠습니다. 다음은 부호 있는 32 비트 색상 표현입니다.

(color) => ff2314 (hexadecimal) => 11111111 00100011 00010100 (binary)

// 32-bit representation of color
00000000 11111111 00100011 00010100

개별 구성 요소를 얻으려면 오른쪽에서 첫 번째 8 비트로 대상 구성 요소 비트를 얻을 때까지 필요에 따라 색상 비트를 8의 배수로 오른쪽 이동합니다. 색상에 대한 32 비트의 최상위 비트는 0이므로 이를 위해 부호 전파 오른쪽 시프트 (>>) 연산자를 안전하게 사용할 수 있습니다.

color => 00000000 11111111 00100011 00010100

// Right shift the color bits by multiples of 8
// Until the target component bits are the first 8 bits from the right

  red => color >> 16
      => 00000000 11111111 00100011 00010100 >> 16
      => 00000000 00000000 00000000 11111111

green => color >> 8
      => 00000000 11111111 00100011 00010100 >> 8
      => 00000000 00000000 11111111 00100011

 blue => color >> 0 => color
      => 00000000 11111111 00100011 00010100

이제 대상 컴포넌트 비트가 오른쪽에서 처음 8 비트로 설정되었으므로 처음 8 비트를 제외한 다른 모든 비트를 마스킹하는 방법이 필요합니다. 그러면 AND (&) 연산자로 돌아갑니다. & 비트를 사용하여 특정 비트가 꺼져 있는지 확인할 수 있습니다.

필요한 비트 마스크를 만들어 봅시다. 다음과 같이 보일 것입니다.

mask => 00000000 00000000 00000000 11111111
     => 0b11111111 (binary)
     => 0xff (hexadecimal)

비트 마스크가 준비되면 비트 마스크를 사용하여 이전 오른쪽 이동 작업의 각 결과에 대해 AND (&) 연산을 수행하여 대상 구성 요소 비트를 추출 할 수 있습니다.

  red => color >> 16 & 0xff
      =>   00000000 00000000 00000000 11111111
      => & 00000000 00000000 00000000 11111111
      => = 00000000 00000000 00000000 11111111
      =>   255 (decimal)

green => color >> 8 & 0xff
      =>   00000000 00000000 11111111 00100011
      => & 00000000 00000000 00000000 11111111
      => = 00000000 00000000 00000000 00100011
      =>   35 (decimal)

 blue => color & 0xff
      =>   00000000 11111111 00100011 00010100
      => & 00000000 00000000 00000000 11111111
      => = 00000000 00000000 00000000 00010100
      =>   20 (decimal)

위의 절차를 기반으로 다음은 16 진수 색상 문자열 (16 진수 6 자리)을 입력으로 사용하여 RGB 색상 구성 요소 값의 해당 배열을 반환하는 간단한 함수입니다.

function hexToRgb (hex) {
  hex = hex.replace(/^#?([0-9a-f]{6})$/i, '$1');
  hex = Number(`0x${hex}`);

  return [
    hex >> 16 & 0xff, // red
    hex >> 8 & 0xff,  // green
    hex & 0xff        // blue
  ];
}