Ang UTF-8 ay nangangahulugang ' Unicode Transformation Format 8-Bit ” at tumutugma sa isang mahusay na format ng pag-encode na nagsisiguro na ang mga character ay ipinapakita nang naaangkop sa lahat ng mga device anuman ang ginamit na wika/script. Gayundin, ang format na ito ay pantulong para sa mga web page at ginagamit para sa pag-iimbak, pagproseso, at pagpapadala ng data ng text sa internet.
Sinasaklaw ng tutorial na ito ang mga bahagi ng nilalaman na nakasaad sa ibaba:
- Ano ang UTF-8 Encoding?
- Paano Gumagana ang UTF-8 Encoding?
- Paano Kinuwenta ang Mga Halaga ng Code Point?
- Paano i-encode/decode ang UTF-8 sa JavaScript?
- I-encode/Decode ang UTF-8 sa JavaScript Gamit ang “encodeURIComponent()” at “decodeURIComponent()” na Paraan.
- I-encode/Decode ang UTF-8 sa JavaScript Gamit ang “encodeURI()” at “decodeURI()” na Paraan.
- I-encode/Decode ang UTF-8 sa JavaScript Gamit ang Regular Expressions.
- Konklusyon
Ano ang UTF-8 Encoding?
“ UTF-8 Encoding ” ay ang pamamaraan ng pagbabago ng pagkakasunud-sunod ng mga Unicode character sa isang naka-encode na string na binubuo ng 8-bit na byte. Ang pag-encode na ito ay maaaring kumatawan sa isang malaking hanay ng mga character kumpara sa iba pang mga pag-encode ng character.
Paano Gumagana ang UTF-8 Encoding?
Habang kumakatawan sa mga character sa UTF-8, ang bawat indibidwal na code point ay kinakatawan ng isa o higit pang byte. Ang sumusunod ay ang breakdown ng mga code point sa hanay ng ASCII:
- Ang isang byte ay kumakatawan sa mga code point sa hanay ng ASCII (0-127).
- Dalawang byte ang kumakatawan sa mga code point sa hanay ng ASCII (128-2047).
- Tatlong byte ang kumakatawan sa mga code point sa hanay ng ASCII (2048-65535).
- Apat na byte ang kumakatawan sa mga code point sa hanay ng ASCII(65536-1114111).
Ito ay tulad na ang unang byte ng isang ' UTF-8 Ang 'sequence ay tinutukoy bilang' lider byte ” na nagbibigay ng impormasyon tungkol sa bilang ng mga byte sa sequence at value ng code point ng character.
Ang 'lider byte' para sa isang solong, dalawa, tatlo, at apat na byte na sequence ay nasa hanay (0-127), (194-233), (224-239), at (240-247), ayon sa pagkakabanggit.
Ang natitirang mga byte sa pagkakasunud-sunod ay tinatawag na ' sumusunod ” bytes. Ang mga byte para sa isang dalawa, tatlo, at apat na byte na pagkakasunud-sunod ay nasa hanay lahat (128-191). Ito ay tulad na ang halaga ng code point ng character ay maaaring makalkula sa pamamagitan ng pagsusuri sa mga nangunguna at sumusunod na byte.
Paano Kinuwenta ang Mga Halaga ng Code Point?
Ang mga halaga ng code point para sa iba't ibang mga byte sequence ay kinakalkula tulad ng sumusunod:
- Dalawang-byte na Sequence: Ang code point ay katumbas ng “((lb – 194) * 64) + (tb – 128)”.
- Three-bytes Sequence : Ang code point ay katumbas ng “((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)”.
- Four-bytes Sequence : Ang code point ay katumbas ng “((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)”.
Paano i-encode/decode ang UTF-8 sa JavaScript?
Ang pag-encode at pag-decode ng UTF-8 sa JavaScript ay maaaring isagawa sa pamamagitan ng mga nakasaad sa ibaba na mga diskarte:
- “ enodeURIComponent() 'at' decodeURIComponent() ' Paraan.
- “ encodeURI() 'at' decodeURI() ' Paraan.
- Mga Regular na Ekspresyon.
Approach 1: Encode/Decode UTF-8 sa JavaScript Gamit ang “encodeURIComponent()” at “decodeURIComponent()” Methods
Ang ' encodeURIComponent() Ang paraan ay nag-e-encode ng isang bahagi ng URI. Gayundin, maaari itong mag-encode ng mga espesyal na character gaya ng @, &, :, +, $, #, atbp. Ang “ decodeURIComponent() ” paraan, gayunpaman, nagde-decode ng isang bahagi ng URI. Ang mga pamamaraang ito ay maaaring gamitin upang i-encode at i-decode ang mga naipasa na halaga sa UTF-8, ayon sa pagkakabanggit.
Syntax('encodeURIComponent()' Method)
encodeURIComponent ( x )Sa ibinigay na syntax, ' x ” ay nagpapahiwatig ng URI na ie-encode.
Ibalik ang Halaga
Ang pamamaraang ito ay nakuha ang isang naka-encode na URI bilang isang string.
Syntax('decodeURIComponent()' Method)
decodeURIComponent ( x )Dito,' x ” ay tumutukoy sa URI na ide-decode.
Ibalik ang Halaga
Ang pamamaraang ito ay nagbibigay ng decoded URI.
Halimbawa 1: Pag-encode ng UTF-8 sa JavaScript
Ine-encode ng halimbawang ito ang ipinasang string sa isang naka-encode na halaga ng UTF-8 sa tulong ng function na tinukoy ng user:
bumalik hindi makatakas ( encodeURIComponent ( x ) ) ;
}
hayaan mo si val = 'dito' ;
console. log ( 'Binigyang Halaga -> ' + val ) ;
hayaan ang encodeVal = encode_utf8 ( val ) ;
console. log ( 'Naka-encode na Halaga -> ' + encodeVal ) ;
Sa mga linya ng code na ito, gawin ang mga hakbang na ibinigay sa ibaba:
- Una, tukuyin ang function na ' encode_utf8() ” na nag-e-encode sa ipinasang string na kinakatawan ng tinukoy na parameter.
- Ang pag-encode na ito ay ginagawa ng ' encodeURIComponent() ” paraan sa kahulugan ng function.
- Tandaan: Ang ' unescape() Pinapalitan ng paraan ang anumang escape sequence ng character na kinakatawan nito.
- Pagkatapos nito, simulan ang halaga na ie-encode at ipakita ito.
- Ngayon, gamitin ang tinukoy na function at ipasa ang tinukoy na kumbinasyon ng mga character bilang mga argumento nito upang i-encode ang halagang ito sa UTF-8.
Output
Dito, maaaring ipahiwatig na ang mga indibidwal na character ay kinakatawan at naka-encode sa UTF-8 nang naaayon.
Halimbawa 2: Pagde-decode ng UTF-8 sa JavaScript
Ang demonstration ng code sa ibaba ay nagde-decode ng ipinasang halaga (sa anyo ng mga character) sa isang naka-encode na representasyon ng UTF-8:
bumalik decodeURIComponent ( tumakas ( x ) ) ;
}
hayaan mo si val = 'à çè' ;
console. log ( 'Binigyang Halaga -> ' + val ) ;
hayaan mong mag-decode = decode_utf8 ( val ) ;
console. log ( 'Na-decode na Halaga -> ' + mag-decode ) ;
Sa bloke ng code na ito:
- Gayundin, tukuyin ang function na ' decode_utf8() ” na nagde-decode ng naipasa na kumbinasyon ng mga character sa pamamagitan ng “ decodeURIComponent() ” paraan.
- Tandaan: Ang ' pagtakas() Ang paraan ng ” ay kumukuha ng bagong string kung saan ang iba't ibang mga character ay pinapalitan ng hexadecimal escape sequence.
- Pagkatapos nito, tukuyin ang kumbinasyon ng mga character na ide-decode at i-access ang tinukoy na function upang maisagawa ang pag-decode sa UTF-8 nang naaangkop.
Output
Dito, maaaring ipahiwatig na ang naka-encode na halaga sa nakaraang halimbawa ay na-decode sa default na halaga.
Approach 2: Encode/Decode UTF-8 sa JavaScript Gamit ang “encodeURI()” at “decodeURI()” na Paraan
Ang ' encodeURI() ” na paraan ay nag-e-encode ng URI sa pamamagitan ng pagpapalit sa bawat instance ng maramihang mga character ng ilang mga escape sequence na kumakatawan sa UTF-8 encoding ng character. Kung ikukumpara sa ' encodeURIComponent() ” paraan, ang partikular na pamamaraang ito ay nag-encode ng mga limitadong character.
Ang ' decodeURI() ” paraan, gayunpaman, nagde-decode ng URI(naka-encode). Ang mga pamamaraang ito ay maaaring ipatupad sa kumbinasyon upang i-encode at i-decode ang kumbinasyon ng mga character sa isang UTF-8 na naka-encode na halaga.
Syntax(encodeURI() Method)
encodeURI ( x )Sa syntax sa itaas, ' x ” ay tumutugma sa halagang ie-encode bilang isang URI.
Ibalik ang Halaga
Kinukuha ng pamamaraang ito ang naka-encode na halaga sa anyo ng isang string.
Syntax(decodeURI() Method)
decodeURI ( x )Dito,' x ” ay kumakatawan sa naka-encode na URI na ide-decode.
Ibalik ang Halaga
Ibinabalik nito ang na-decode na URI bilang isang string.
Halimbawa 1: Pag-encode ng UTF-8 sa JavaScript
Ine-encode ng demonstration na ito ang naipasa na kumbinasyon ng mga character sa isang naka-encode na halaga ng UTF-8:
bumalik hindi makatakas ( encodeURI ( x ) ) ;
}
hayaan mo si val = 'dito' ;
console. log ( 'Binigyang Halaga -> ' + val ) ;
hayaan ang encodeVal = encode_utf8 ( val ) ;
console. log ( 'Naka-encode na Halaga -> ' + encodeVal ) ;
Dito, alalahanin ang mga diskarte para sa pagtukoy ng isang function na inilaan para sa pag-encode. Ngayon, ilapat ang 'encodeURI()' na paraan upang kumatawan sa naipasa na kumbinasyon ng mga character bilang UTF-8 na naka-encode na string. Pagkatapos nito, gayundin, tukuyin ang mga character na susuriin at i-invoke ang tinukoy na function sa pamamagitan ng pagpasa sa tinukoy na halaga bilang mga argumento nito upang maisagawa ang pag-encode.
Output
Dito, maliwanag na matagumpay na na-encode ang naipasa na kumbinasyon ng mga character.
Halimbawa 2: Pagde-decode ng UTF-8 sa JavaScript
Ang demonstration ng code sa ibaba ay nagde-decode ng naka-encode na halaga ng UTF-8 (sa nakaraang halimbawa):
bumalik decodeURI ( tumakas ( x ) ) ;
}
hayaan mo si val = 'à §Ã¨' ;
console. log ( 'Binigyang Halaga -> ' + val ) ;
hayaan mong mag-decode = decode_utf8 ( val ) ;
console. log ( 'Na-decode na Halaga -> ' + mag-decode ) ;
Ayon sa code na ito, ipahayag ang function na ' decode_utf8() ” na binubuo ng nakasaad na parameter na kumakatawan sa kumbinasyon ng mga character na ide-decode gamit ang “ decodeURI() ” paraan. Ngayon, tukuyin ang halaga na ide-decode at i-invoke ang tinukoy na function upang ilapat ang decoding sa ' UTF-8 ” representasyon.
Output
Ang kinalabasan na ito ay nagpapahiwatig na ang naka-encode na halaga dati ay napagpasyahan nang naaayon.
Approach 3: Encode/Decode UTF-8 sa JavaScript Gamit ang Regular Expressions
Inilalapat ng diskarteng ito ang pag-encode upang ang multi-byte na unicode string ay naka-encode sa UTF-8 na maramihang single-byte na character. Gayundin, ang pag-decode ay isinasagawa upang ang naka-encode na string ay na-decode pabalik sa mga multi-byte na Unicode na character.
Halimbawa 1: Pag-encode ng UTF-8 sa JavaScript
Ine-encode ng code sa ibaba ang multi-byte na unicode string sa UTF-8 na single-byte na character:
kung ( uri ng val != 'string' ) itapon bago Pagkakamali sa pagtype ( 'Ang Parameter' val 'ay hindi isang string' ) ;
const string_utf8 = val. palitan (
/[\u0080-\u07ff]/g , // U+0080 - U+07FF => 2 byte 110yyyyy, 10zzzzzz
function ( x ) {
ay palabas = x. charCodeAt ( 0 ) ;
bumalik String . mula saCharCode ( 0xc0 | palabas >> 6 , 0x80 | palabas at 0x3f ) ; }
) . palitan (
/[\u0800-\uffff]/g , // U+0800 - U+FFFF => 3 byte 1110xxxx, 10yyyyyy, 10zzzzzz
function ( x ) {
ay palabas = x. charCodeAt ( 0 ) ;
bumalik String . mula saCharCode ( 0xe0 | palabas >> 12 , 0x80 | palabas >> 6 at 0x3F , 0x80 | palabas at 0x3f ) ; }
) ;
console. log ( 'Naka-encode na Halaga Gamit ang Regular na Expression -> ' + string_utf8 ) ;
}
i-encodeUTF8 ( 'dito' )
Sa snippet na ito ng code:
- Tukuyin ang function na ' encodeUTF8() ” na binubuo ng parameter na kumakatawan sa value na ie-encode bilang “ UTF-8 ”.
- Sa kahulugan nito, maglapat ng tseke sa ipinasang halaga na hindi string gamit ang “ uri ng ” operator at ibalik ang tinukoy na custom exception sa pamamagitan ng “ itapon ” keyword.
- Pagkatapos nito, ilapat ang ' charCodeAt() 'at' fromCharCode() ” na paraan para makuha ang Unicode ng unang character sa string at ibahin ang ibinigay na Unicode value sa mga character, ayon sa pagkakabanggit.
- Panghuli, i-invoke ang tinukoy na function sa pamamagitan ng pagpasa sa ibinigay na sequence ng mga character upang i-encode ang value na ito bilang isang ' UTF-8 ” representasyon.
Output
Ang output na ito ay nagpapahiwatig na ang pag-encode ay isinasagawa nang naaangkop.
Halimbawa 2: Pagde-decode ng UTF-8 sa JavaScript
Sa pagpapakitang ito, ang pagkakasunud-sunod ng mga character ay na-decode sa ' UTF-8 ” representasyon:
kung ( uri ng val != 'string' ) itapon bago Pagkakamali sa pagtype ( 'Ang Parameter' val 'ay hindi isang string' ) ;
const str = val. palitan (
/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g ,
function ( x ) {
ay palabas = ( ( x. charCodeAt ( 0 ) at 0x0f ) << 12 ) | ( ( x. charCodeAt ( 1 ) at 0x3f ) << 6 ) | ( x. charCodeAt ( 2 ) at 0x3f ) ;
bumalik String . mula saCharCode ( palabas ) ; }
) . palitan (
/[\u00c0-\u00df][\u0080-\u00bf]/g ,
function ( x ) {
ay palabas = ( x. charCodeAt ( 0 ) at 0x1f ) < '+str);
}
decodeUTF8('à çè')
Sa code na ito:
- Katulad nito, tukuyin ang function na ' decodeUTF8() ” pagkakaroon ng parameter na tumutukoy sa ipinasa na halaga na ide-decode.
- Sa kahulugan ng function, tingnan ang kundisyon ng string ng naipasa na halaga sa pamamagitan ng “ uri ng ” operator.
- Ngayon, ilapat ang ' charCodeAt() ” paraan upang makuha ang Unicode ng una, pangalawa, at pangatlong string na mga character, ayon sa pagkakabanggit.
- Gayundin, ilapat ang ' String.fromCharCode() ” paraan upang baguhin ang mga halaga ng Unicode sa mga character.
- Gayundin, ulitin muli ang pamamaraang ito upang kunin ang Unicode ng una at pangalawang string na mga character at gawing mga character ang mga unicode value na ito.
- Panghuli, i-access ang tinukoy na function upang ibalik ang UTF-8 decoded value.
Output
Dito, mapapatunayan na tama ang pag-decode.
Konklusyon
Ang pag-encode/decoding sa representasyon ng UTF-8 ay maaaring isagawa sa pamamagitan ng “ enodeURIComponent()” at ' decodeURIComponent() pamamaraan, ang ' encodeURI() 'at' decodeURI() ” na pamamaraan, o gamit ang Regular Expressions.