티스토리 뷰

목차

    반응형

    일본은 영어권 국가가 아니라 문자열 진수 변환 방법이 우리나라랑 똑같습니다. 일본 프로그래머가 올려놓은 글 소개할게요.

    저는 Vus js 기반에서 이 자바스크립트 소스를 이용해 편안하게 잘 사용하고 있습니다.



    또한, 변경한 hex 데이터를 array 또는 object로 사용하고 싶다면 아래 글을 추가로 참조하시면 되겠습니다.


    prototype001.js --- UTF8⇔16 진수 문자열 변환 Javascript

    // 문자열을 UTF8 16 진수 문자열로 변환 


    function string_to_utf8_hex_string(text)

    {

        var bytes1 = string_to_utf8_bytes (text);

        var hex_str1 = bytes_to_hex_string (bytes1);


        return hex_str1;

    }



    // UTF8 16 진수 문자열을 문자열로 변환 


    function utf8_hex_string_to_string(hex_str1)

        var bytes2 = hex_string_to_bytes (hex_str1);

        var str2 = utf8_bytes_to_string (bytes2);


        return str2;

    }



    // 문자열을 UTF8 바이트 배열로 변환 


    function string_to_utf8_bytes(text)

    {

        var result = [] ;


        if (text == null )

            return result;


        for ( var i = 0; i <text.length; i ++) {

            var c = text.charCodeAt (i);


            if (c <= 0x7f) {

                result.push (c);

            } else if (c <= 0x07ff) {

                result.push (((c >> 6) & 0x1F) | 0xC0);

                result.push ((c & 0x3F) | 0x80);

            } else {

                result.push (((c >> 12) & 0x0F) | 0xE0);

                result.push (((c >> 6) & 0x3F) | 0x80);

                result.push ((c & 0x3F) | 0x80);

            }

        }


        return result;

    }



    // 바이트 값을 16 진수 문자열로 변환


    function byte_to_hex(byte_num)

    {

        var digits = (byte_num).toString (16);


        if (byte_num <16)

            return '0' + digits;


        return digits;

    }



    // 바이트 배열을 16 진수 문자열로 변환 


    function bytes_to_hex_string(bytes)

    {

        var result = "" ;


        for ( var i = 0; i <bytes.length; i ++) { 

            result + = byte_to_hex (bytes[i]);

        }


        return result;

    }



    // 16 진수 문자열을 바이트 값으로 변환 


    function hex_to_byte(hex_str)

    {

        return parseInt(hex_str 16);

    }



    // 바이트 배열을 16 진수 문자열로 변환 


    function hex_string_to_bytes(hex_str)

        var result = [] ;


        for ( var i = 0; i <hex_str.length; i + = 2) {

            result.push (hex_to_byte (hex_str.substr (i, 2)));

        }


        return result;

    }



    // UTF8 바이트 배열을 문자열로 변환


    function utf8_bytes_to_string(arr)

    {

        if (arr == null)

            return null;


        var result = "";

        var i;


        while (i = arr.shift()) {

            if (i <= 0x7f) {

                result += String.fromCharCode(i);

            } else if (i <= 0xdf) { 

                var c = ((i & 0x1f) << 6);

                c += arr.shift() & 0x3f;

                result + = String.fromCharCode(c);

            } else if (i <= 0xe0) { 

                var c = ((arr.shift () & 0x1f) << 6) | 0x0800;

                c += arr.shift() & 0x3f;

                result += String.fromCharCode(c);

            } else {

                var c = ((i & 0x0f) << 12);

                c += (arr.shift() & 0x3f) << 6;

                c += arr.shift() & 0x3f;

                result += String.fromCharCode(c);

            }

        }


        return result;

    }



    그리고 위 소스 코드를 테스트할 HTML입니다.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html lang="ko">

    <html>

    <head>

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <script src="prototype001.js"></script>

    <script language="JavaScript">

    <!--

    function test01(){

    alert('오늘은 날씨가 좋습니다');

    }


    function test02(){

      var bytes = string_to_utf8_bytes('오늘은 날씨가 좋습니다');

      alert(eval(bytes));

    }


    function test03(){

      var bytes = string_to_utf8_bytes('오늘은 날씨가 좋습니다');

      alert(bytes_to_hex_string(bytes));

    }


    function test04(){

      var bytes1 = string_to_utf8_bytes('오늘은 날씨가 좋습니다');

      var hex_str1 = bytes_to_hex_string(bytes1);

      var bytes2 = hex_string_to_bytes(hex_str1);

      alert(eval(bytes2));

      var str2 = utf8_bytes_to_string(bytes2);

      alert(str2);

    }


    function test05(){

      var hex_str1 = string_to_utf8_hex_string('오늘은 날씨가 좋습니다');

      document.getElementById('hex_temp').innerHTML = hex_str1;

      var str2 = utf8_hex_string_to_string(hex_str1);

      alert(str2);

    }

    //-->

    </script>

    </head>

    <body>

    <a href="#"  onClick="Javascript:test01();">試作ver001</a><br />

    <a href="#"  onClick="Javascript:test02();">試作ver002</a><br />

    <a href="#"  onClick="Javascript:test03();">試作ver003</a><br />

    <a href="#"  onClick="Javascript:test04();">試作ver004</a><br />

    <a href="#"  onClick="Javascript:test05();">試作ver005</a><br />

    <br />

    <span id="hex_temp"></span>

    </body>

    <html>



    사용 방법은 이렇습니다.


    string_to_utf8_hex_string() = 문자열을 UTF8, 16 진수 자바스크립트 문자열로 변환합니다.

    예) '今日はいい天気です' → e4bb8ae697a5e381afe38184e38184e5a4a9e6b097e381a7e38199


    utf8_hex_string_to_string() = UTF8, 16진수 문자열을 일반 문자열(string)로 변환합니다.

    예) e4bb8ae697a5e381afe38184e38184e5a4a9e6b097e381a7e38199  → '今日はいい天気です'




    만약 타입스크립트를 사용하신다면, 제가 변환한 소스 코드를 보시면 됩니다. eslint + typescript 여기를 클릭하세요.


    관련 글

    TypeScript null, undefined 확인 방법 (타입스크립트)

    JavaScript Array to Object 변환 3가지 방법

    javascript 형태: date format을 JSON 포맷으로

    반응형