JavaScript에서 UTF-8을 인코딩/디코딩하는 방법

UTF-8은 “ 유니코드 변환 형식 8비트 ”는 사용되는 언어/스크립트에 관계없이 모든 장치에서 문자가 적절하게 표시되도록 보장하는 뛰어난 인코딩 형식에 해당합니다. 또한 이 형식은 웹 페이지에 보조적이며 인터넷에서 텍스트 데이터의 저장, 처리 및 전송에 활용됩니다.

이 튜토리얼에서는 아래에 명시된 콘텐츠 영역을 다룹니다.

• UTF-8 인코딩이란 무엇입니까?
• UTF-8 인코딩은 어떻게 작동합니까?
• 코드 포인트 값은 어떻게 계산됩니까?
• JavaScript에서 UTF-8을 어떻게 인코딩/디코딩하나요?
• 'encodeURIComponent()' 및 'decodeURIComponent()' 메서드를 사용하여 JavaScript에서 UTF-8을 인코딩/디코딩합니다.
• 'encodeURI()' 및 'decodeURI()' 메서드를 사용하여 JavaScript에서 UTF-8을 인코딩/디코딩합니다.
• 정규식을 사용하여 JavaScript에서 UTF-8을 인코딩/디코딩합니다.
• 결론

UTF-8 인코딩이란 무엇입니까?

“ UTF-8 인코딩 '는 유니코드 문자 시퀀스를 8비트 바이트로 구성된 인코딩된 문자열로 변환하는 절차입니다. 이 인코딩은 다른 문자 인코딩에 비해 넓은 범위의 문자를 나타낼 수 있습니다.

UTF-8 인코딩은 어떻게 작동합니까?

UTF-8로 문자를 표현하는 동안 모든 개별 코드 포인트는 하나 이상의 바이트로 표현됩니다. 다음은 ASCII 범위의 코드 포인트에 대한 분석입니다.

• 단일 바이트는 ASCII 범위(0-127)의 코드 포인트를 나타냅니다.
• 2바이트는 ASCII 범위(128-2047)의 코드 포인트를 나타냅니다.
• 3바이트는 ASCII 범위(2048-65535)의 코드 포인트를 나타냅니다.
• 4바이트는 ASCII 범위(65536-1114111)의 코드 포인트를 나타냅니다.

'의 첫 번째 바이트는 다음과 같습니다. UTF-8 ” 시퀀스는 “ 리더 바이트 ”는 시퀀스의 바이트 수와 문자의 코드 포인트 값에 대한 정보를 제공합니다.
단일, 2, 3, 4바이트 시퀀스에 대한 '리더 바이트'는 각각 (0-127), (194-233), (224-239) 및 (240-247) 범위에 있습니다.

순서대로 나머지 바이트를 ' 후행 ” 바이트. 2바이트, 3바이트, 4바이트 시퀀스의 바이트는 모두 (128-191) 범위에 있습니다. 이는 선행 및 후행 바이트를 분석하여 문자의 코드 포인트 값을 계산할 수 있도록 하는 것입니다.

코드 포인트 값은 어떻게 계산됩니까?

다양한 바이트 시퀀스의 코드 포인트 값은 다음과 같이 계산됩니다.

• 2바이트 시퀀스: 코드 포인트는 '((lb – 194) * 64) + (tb – 128)'과 동일합니다.
• 3바이트 시퀀스 : 코드 포인트는 '((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)'과 동일합니다.
• 4바이트 시퀀스 : 코드 포인트는 '((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)'과 동일합니다.

JavaScript에서 UTF-8을 어떻게 인코딩/디코딩하나요?

JavaScript에서 UTF-8의 인코딩 및 디코딩은 아래에 설명된 접근 방식을 통해 수행될 수 있습니다.

• “ enodeURI컴포넌트() ' 그리고 ' 디코드URI컴포넌트() ' 방법.
• “ 인코딩URI() ' 그리고 ' 디코드URI() ' 방법.
• 정규식.

접근 방식 1: 'encodeURIComponent()' 및 'decodeURIComponent()' 메서드를 사용하여 JavaScript에서 UTF-8 인코딩/디코딩

“ 인코딩URI컴포넌트() ” 메소드는 URI 구성요소를 인코딩합니다. 또한 @, &, :, +, $, # 등과 같은 특수 문자를 인코딩할 수 있습니다. 디코드URI컴포넌트() ” 메서드는 URI 구성 요소를 디코딩합니다. 이러한 방법을 사용하여 전달된 값을 각각 UTF-8로 인코딩하고 디코딩할 수 있습니다.

Syntax(“encodeURIComponent()” 메소드)

주어진 구문에서 “ 엑스 ”는 인코딩할 URI를 나타냅니다.

반환 값
이 메소드는 인코딩된 URI를 문자열로 검색했습니다.

Syntax(“decodeURIComponent()” 메서드)

여기, ' 엑스 ”는 디코딩할 URI를 나타냅니다.

반환 값
이 메서드는 디코딩된 URI를 제공합니다.

예 1: JavaScript에서 UTF-8 인코딩
이 예에서는 사용자 정의 함수를 사용하여 전달된 문자열을 인코딩된 UTF-8 값으로 인코딩합니다.

이 코드 줄에서 아래 단계를 수행하십시오.

• 먼저, “ encode_utf8() ”는 지정된 매개변수로 표시되는 전달된 문자열을 인코딩합니다.
• 이 인코딩은 ' 인코딩URI컴포넌트() ” 메소드를 함수 정의에 사용합니다.
• 메모: “ 탈출() ” 메소드는 모든 이스케이프 시퀀스를 해당 문자로 대체합니다.
• 이후 인코딩할 값을 초기화하여 표시합니다.
• 이제 정의된 함수를 호출하고 정의된 문자 조합을 인수로 전달하여 이 값을 UTF-8로 인코딩합니다.

산출

여기서는 개별 문자가 그에 따라 UTF-8로 표현되고 인코딩된다는 것을 암시할 수 있습니다.

예제 2: JavaScript에서 UTF-8 디코딩
아래 코드 데모는 전달된 값(문자 형식)을 인코딩된 UTF-8 표현으로 디코딩합니다.

이 코드 블록에서는:

• 마찬가지로, “ decode_utf8() ”는 “를 통해 전달된 문자 조합을 디코딩합니다. 디코드URI컴포넌트() ' 방법.
• 메모: “ 탈출하다() ” 메소드는 다양한 문자가 16진수 이스케이프 시퀀스로 대체된 새 문자열을 검색합니다.
• 그런 다음 디코딩할 문자 조합을 지정하고 정의된 함수에 액세스하여 UTF-8로 적절하게 디코딩을 수행합니다.

산출

여기서, 앞선 예에서 인코딩된 값이 기본값으로 디코딩되었음을 암시할 수 있다.

접근 방식 2: 'encodeURI()' 및 'decodeURI()' 메서드를 사용하여 JavaScript에서 UTF-8 인코딩/디코딩

“ 인코딩URI() ” 메소드는 여러 문자의 각 인스턴스를 문자의 UTF-8 인코딩을 나타내는 여러 이스케이프 시퀀스로 대체하여 URI를 인코딩합니다. “에 비해 인코딩URI컴포넌트() ” 메서드와 달리 이 특정 메서드는 제한된 문자를 인코딩합니다.

“ 디코드URI() ” 메서드는 URI(인코딩됨)를 디코딩합니다. UTF-8로 인코딩된 값의 문자 조합을 인코딩 및 디코딩하기 위해 이러한 메서드를 조합하여 구현할 수 있습니다.

구문(encodeURI() 메서드)

위 구문에서 “ 엑스 ”는 URI로 인코딩할 값에 해당합니다.

반환 값
이 메서드는 문자열 형식으로 인코딩된 값을 검색합니다.

구문(decodeURI() 메서드)

여기, ' 엑스 ”는 디코딩할 인코딩된 URI를 나타냅니다.

반환 값
디코딩된 URI를 문자열로 반환합니다.

예 1: JavaScript에서 UTF-8 인코딩
이 데모에서는 전달된 문자 조합을 인코딩된 UTF-8 값으로 인코딩합니다.

여기서 인코딩을 위해 할당된 기능을 정의하는 접근 방식을 상기해 보세요. 이제 'encodeURI()' 메서드를 적용하여 전달된 문자 조합을 UTF-8로 인코딩된 문자열로 나타냅니다. 그런 다음 마찬가지로 평가할 문자를 정의하고 정의된 값을 인수로 전달하여 정의된 함수를 호출하여 인코딩을 수행합니다.

산출

여기서는 전달된 문자 조합이 성공적으로 인코딩되었음을 알 수 있습니다.

예제 2: JavaScript에서 UTF-8 디코딩
아래 코드 데모는 인코딩된 UTF-8 값(이전 예)을 디코딩합니다.

이 코드에 따르면, “ decode_utf8() ”는 “를 사용하여 디코딩될 문자의 조합을 나타내는 명시된 매개변수로 구성됩니다. 디코드URI() ' 방법. 이제 디코딩할 값을 지정하고 정의된 함수를 호출하여 ' UTF-8 ” 대표.

산출

이 결과는 이전에 인코딩된 값이 이에 따라 결정됨을 의미합니다.

접근 방식 3: 정규식을 사용하여 JavaScript에서 UTF-8 인코딩/디코딩

이 접근 방식은 멀티바이트 유니코드 문자열이 UTF-8 여러 싱글바이트 문자로 인코딩되도록 인코딩을 적용합니다. 마찬가지로 인코딩된 문자열이 멀티바이트 유니코드 문자로 다시 디코딩되도록 디코딩이 수행됩니다.

예 1: JavaScript에서 UTF-8 인코딩
아래 코드는 멀티바이트 유니코드 문자열을 UTF-8 싱글바이트 문자로 인코딩합니다.

이 코드 조각에서:

• '라는 기능을 정의합니다. 인코딩UTF8() '는 '로 인코딩될 값을 나타내는 매개변수로 구성됩니다. UTF-8 '.
• 정의에서 '를 사용하여 문자열이 아닌 전달된 값에 검사를 적용합니다. 유형 ” 연산자를 사용하고 “를 통해 지정된 사용자 정의 예외를 반환합니다. 던지다 ” 키워드입니다.
• 그 후 “ charCodeAt() ' 그리고 ' 챠코드() ” 문자열의 첫 번째 문자의 유니코드를 검색하고 주어진 유니코드 값을 각각 문자로 변환하는 메서드입니다.
• 마지막으로, 이 값을 '로 인코딩하기 위해 주어진 문자 시퀀스를 전달하여 정의된 함수를 호출합니다. UTF-8 ” 대표.

산출

이 출력은 인코딩이 적절하게 수행되었음을 나타냅니다.

예제 2: JavaScript에서 UTF-8 디코딩
이 데모에서는 문자 시퀀스가 ​​' UTF-8 ” 표현:

이 코드에서는:

• 마찬가지로, “ 디코드UTF8() ”에는 디코딩할 전달된 값을 참조하는 매개변수가 있습니다.
• 함수 정의에서 '를 통해 전달된 값의 문자열 조건을 확인합니다. 유형 ' 운영자.
• 이제 '를 적용해 보세요. charCodeAt() ” 메서드를 사용하여 각각 첫 번째, 두 번째, 세 번째 문자열 문자의 유니코드를 검색합니다.
• 또한 “ 문자열.fromCharCode() ” 유니코드 값을 문자로 변환하는 메서드입니다.
• 마찬가지로 이 절차를 다시 반복하여 첫 번째 및 두 번째 문자열 문자의 유니코드를 가져오고 이러한 유니코드 값을 문자로 변환합니다.
• 마지막으로 정의된 함수에 액세스하여 UTF-8 디코딩된 값을 반환합니다.

산출

여기서는 디코딩이 제대로 이루어졌음을 확인할 수 있다.

결론

UTF-8 표현의 인코딩/디코딩은 다음을 통해 수행될 수 있습니다. enodeURIComponent()” 그리고 ' 디코드URI컴포넌트() 방법, “ 인코딩URI() ' 그리고 ' 디코드URI() ” 메소드를 사용하거나 정규 표현식을 사용합니다.