[ 자바스크립트 ] charCodeAt VS codePointAt

[ Javascript ] charCodeAt VS codePointAt

Polyfill

 
<script type="text/javascript">
// source: https://tonks.tistory.com/188#_javascript_codePointAt 

if ( ! String.prototype.codePointAt ) { 
    String.prototype.codePointAt = function codePointAt ( position ) { 

            if ( this == null ) { 
                    var error = new TypeError( "String.prototype.codePointAt called on null or undefined" ); 
                          error.description = error.name + ": " + error.message; 

                    throw error; 
            } 

            var string = String( this ); 
            var len = string.length; 

            var index = position ? Number( position ) : 0; 
            if ( index != index ) index = 0; 
            if ( index < 0 || index >= len ) return undefined; 

            var firstCode = string.charCodeAt( index ); 

            if ( firstCode >= 0xD800 && firstCode <= 0xDBFF && len > index + 1 ) {
                    var secondCode = string.charCodeAt( index + 1 ); 

                    if ( secondCode >= 0xDC00 && secondCode <= 0xDFFF ) { 
                            return ( firstCode - 0xD800 ) * 0x400 + secondCode - 0xDC00 + 0x10000; 
                    }
            } 

            return firstCode; 
    }; 

    // String.prototype.codePointAt.toString = function toString () { return "function codePointAt () {\n    [native code]\n}" }; 
} 
</script>
 

또는 (Another source)
☞ https://github.com/mathiasbynens/String.prototype.codePointAt/blob/master/codepointat.js

---

A : Latin Capital Letter A ( U+0041 )

 A  A 

<span> &#x41; </span> <span> &#65; </span>

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "\u0041"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 0 );

    charCode.innerHTML = txt.charCodeAt( 0 );
} 
</script>
 

---

𝔸 : Mathematical Double-struck Capital A ( U+1D538 )

 𝔸  𝔸 

<span> &#x1d538; </span> <span> &#120120; </span>

 
<button onclick="testing()"> Click me </button>

<p id="char"> &#x1d538; </p>

<p id="charLength"> </p>

<script type="text/javascript">
function testing () { 

    var txt = char.innerHTML; 

    charLength.innerHTML = txt.length;
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>

<p id="charLength"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "\ud835\udd38"; 

    char.innerHTML = txt; 

    charLength.innerHTML = txt.length;
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "\ud835\udd38"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 0 );

    charCode.innerHTML = txt.charCodeAt( 0 );
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "\ud835\udd38"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 1 );

    charCode.innerHTML = txt.charCodeAt( 1 );
} 
</script>
 

---

q̣̇ : q(U+0071) +  ̇(U+0307) +  ̣(U+0323)

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>

<p id="charLength"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "q\u0307\u0323"; 

    char.innerHTML = txt; 

    charLength.innerHTML = txt.length;
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "q\u0307\u0323"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 0 );

    charCode.innerHTML = txt.charCodeAt( 0 );
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "q\u0307\u0323"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 1 );

    charCode.innerHTML = txt.charCodeAt( 1 );
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="char"> </p>
<p id="codePoint"> </p>
<p id="charCode"> </p>

<script type="text/javascript">
function testing () { 

    var txt = "q\u0307\u0323"; 

    char.innerHTML = txt;

    codePoint.innerHTML = txt.codePointAt( 2 );

    charCode.innerHTML = txt.charCodeAt( 2 );
} 
</script>
 

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below. *^^*