자바스크립트 16진수 표현과 toString 메서드 javascript hexadecimal and toString()

자바스크립트의 진법 표현은 다양하다. base10 기본 십진법부터 base32 까지 가능하다. 또한 0x로 시작하는 16진수로 다른 무엇인가를 표현하고 수정하여 색이나 아스키같은 문자를 표현할 수 있고, 특정 데이터를 암호화 할 수 있다. 당연히 웹브라우저의 한계가 있다고 보여지지만 과거에 비해 웹을 많이 사용하는 현재 이 기능은 알게모르게 많이 사용된다.

자바스크립트 16진수 표현과 toString 메서드
javascript hexadecimal and toString()

자바스크립트 다른 언어들과는 다르게 숫자형은 number 하나이다.

그럼에도 여러가지 표현이 가능한데 그 중 하나가 16진수인 hexadecimal 이다.

16진수는 어렵지 않다.

숫자나 문자앞에 0x 란 표시만 붙여주면 된다.

16진수에 대한 표현과 의미를 잘 모르지만 우리가 이런 표현을 자주 보는 곳이 있다.

그렇다 포토샵의 숫자표기 형식 중 0xffffff 이기도 하다.

toString() 메서드는 문자열을 만드는 것이지만 10진수를 16진수 또는 8진수로 표기하도록 할 수 있다.

hexadecimal 16진수

16진수를 자주 사용하는 사람이라면 아무 그래픽작업을 하거나 개발분야는 인코딩같은 작업을 하는 경우가 많을 것이다.

본인은 진수표현을 잘 사용한 적이 없기 때문에 이런 기능도 있구나 하는 정도지만 가끔 문자열이 깨지거나 암호화가 필요한 경우 간혹 이용한다.

16진수의 시작은 0에서 15까지이다.

10진수가 0에서 9까지 인것과 같은 표현이다.

학교에서 진수표현에 대한 공부를 해봤다면 알 수 있는 내용이다.

진수의 표현

자바스크립트는 기본적으로 10진수를 표현한다.

10진수는 base10을 십진법이다.

수의 표현은 많다.

자바스크립트는 이런 표현을 위해 base2부터 base36까지 진법표현이 가능하도록 해준다.

여기서 사용하는 것이 toString() 메서드이다.

샘플코드

위의 내용들을 가지고 샘플코드를 작성해 본다.

왜 굳이 진법표현을 자바스크립트에 만들었냐 궁금할 수도 있지만

암호화나 그래픽 또는 웹에서 정보를 노출하기 꺼려질 경우에 사용되는 경우들도 있다.

물론 다른 방법으로 사용되는게 있지만, 궁금하면 구글에서 검색된 페이지를 소스보기하면 볼 수 있기도 하다.

굳이 데이터를 진법으로 표현한 것들이 있는데 이것은 구글 또한 데이터에 대해 보호하고자 하는 의지의 표현이다.

어쨌든 코드를 보자.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 숫자형</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
            <p id="ret3"></p>
            <p id="ret4"></p>
            <p id="ret5"></p>
            <p id="ret6"></p>
            <p id="ret7"></p>
        </div>

        <script>
            
            console.log("----------");
            
            let hexaNumS = 0x00;
            let hexaNumE = 0xFF;

            console.log(typeof(hexaNumS), hexaNumS);
            console.log(typeof(hexaNumE), hexaNumE);
            document.getElementById("ret1").innerText = hexaNumS + " ~ " + hexaNumE;

            console.log("----------");
            
            let vBaseNum;
            vBaseNum = 10;
            
            vToBaseNum = vBaseNum.toString(10);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret2").innerText = vToBaseNum;

            vToBaseNum = vBaseNum.toString(2);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret3").innerText = vToBaseNum;

            vToBaseNum = vBaseNum.toString(4);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret4").innerText = vToBaseNum;

            vToBaseNum = vBaseNum.toString(8);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret5").innerText = vToBaseNum;

            vToBaseNum = vBaseNum.toString(16);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret6").innerText = vToBaseNum;

            vToBaseNum = vBaseNum.toString(32);
            console.log(typeof(vToBaseNum), vToBaseNum);
            document.getElementById("ret7").innerText = vToBaseNum;

        </script>

    </body>
</html>

코드가 길다.

길어 보일 뿐이다. 출력문이 더 많다.

결과 화면을 보면 알 수 있듯이 10진수부터 16진수 그 이상의 표현이 가능한 것을 볼 수 있다.

당연히 0x으로 시작하는 것은 number 형이다.

십진법의 수를 toString() 메서드로 수정하여 표현하면 다른 진법으로 표현할 수 있다.

참고로 toString() 은 최종적으로 문자열로 변환된다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 숫자 문자 변환 메서드 toString javascript number toString method (0)	2021.12.02
자바스크립트 숫자 객체 관계 javascript number object (0)	2021.12.01
자바스크립트 숫자 Infinity 무량대수 표현 javascript number (0)	2021.11.30
자바스크립트 NaN 숫자가 아닙니다. javascript nan not a number (0)	2021.11.30
자바스크립트 숫자 문자열의 동작 관계 javascript numeric strings (0)	2021.11.29

자바스크립트 16진수 표현과 toString 메서드 javascript hexadecimal and toString()