UTF-8 significa ' Formato de transformación Unicode de 8 bits ”y corresponde a un gran formato de codificación que garantiza que los caracteres se muestren correctamente en todos los dispositivos, independientemente del idioma/escritura utilizado. Además, este formato ayuda a las páginas web y se utiliza para el almacenamiento, procesamiento y transmisión de datos de texto en Internet.
Este tutorial cubre las áreas de contenido que se indican a continuación:
- ¿Qué es la codificación UTF-8?
- ¿Cómo funciona la codificación UTF-8?
- ¿Cómo se calculan los valores de los puntos de código?
- ¿Cómo codificar/decodificar UTF-8 en JavaScript?
- Codifique/decodifique UTF-8 en JavaScript utilizando los métodos “encodeURIComponent()” y “decodeURIComponent()”.
- Codifique/decodifique UTF-8 en JavaScript utilizando los métodos “encodeURI()” y “decodeURI()”.
- Codifique/decodifique UTF-8 en JavaScript utilizando expresiones regulares.
- Conclusión
¿Qué es la codificación UTF-8?
“ Codificación UTF-8 'Es el procedimiento de transformar la secuencia de caracteres Unicode en una cadena codificada que comprende bytes de 8 bits. Esta codificación puede representar una amplia gama de caracteres en comparación con otras codificaciones de caracteres.
¿Cómo funciona la codificación UTF-8?
Al representar caracteres en UTF-8, cada punto de código individual está representado por uno o más bytes. A continuación se muestra el desglose de los puntos de código en el rango ASCII:
- Un solo byte representa los puntos de código en el rango ASCII (0-127).
- Dos bytes representan los puntos de código en el rango ASCII (128-2047).
- Tres bytes representan los puntos de código en el rango ASCII (2048-65535).
- Cuatro bytes representan los puntos de código en el rango ASCII (65536-1114111).
Es tal que el primer byte de un ' UTF-8 La secuencia se conoce como ' byte líder ”que proporciona información sobre el número de bytes en la secuencia y el valor del punto de código del carácter.
El “byte líder” para una secuencia de uno, dos, tres y cuatro bytes está en el rango (0-127), (194-233), (224-239) y (240-247), respectivamente.
El resto de los bytes en secuencia se denominan ' siguiendo ”bytes. Los bytes para una secuencia de dos, tres y cuatro bytes están todos en el rango (128-191). Es tal que el valor del punto de código del carácter se puede calcular analizando los bytes iniciales y finales.
¿Cómo se calculan los valores de los puntos de código?
Los valores de los puntos de código para diferentes secuencias de bytes se calculan de la siguiente manera:
- Secuencia de dos bytes: El punto de código equivale a “((lb – 194) * 64) + (tb – 128)”.
- Secuencia de tres bytes : El punto de código equivale a “((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)”.
- Secuencia de cuatro bytes : El punto de código equivale a “((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)”.
¿Cómo codificar/decodificar UTF-8 en JavaScript?
La codificación y decodificación de UTF-8 en JavaScript se puede realizar mediante los métodos que se indican a continuación:
- “ enodoURIComponente() ' y ' decodificarURIComponente() ' Métodos.
- “ codificarURI() ' y ' decodificarURI() ' Métodos.
- Expresiones regulares.
Método 1: codificar/decodificar UTF-8 en JavaScript utilizando los métodos “encodeURIComponent()” y “decodeURIComponent()”
El ' codificarURIComponente() El método codifica un componente URI. Además, puede codificar caracteres especiales como @, &, :, +, $, #, etc. El ' decodificarURIComponente() ”, sin embargo, decodifica un componente URI. Estos métodos se pueden utilizar para codificar y decodificar los valores pasados en UTF-8, respectivamente.
Sintaxis(Método “encodeURIComponent()”)
codificarURIComponente ( X )En la sintaxis dada, “ X ”indica el URI que se va a codificar.
Valor de retorno
Este método recuperó un URI codificado como una cadena.
Sintaxis(Método “decodeURIComponent()”)
decodificarURIComponente ( X )Aquí, ' X ”se refiere al URI que se va a decodificar.
Valor de retorno
Este método proporciona el URI decodificado.
Ejemplo 1: codificación de UTF-8 en JavaScript
Este ejemplo codifica la cadena pasada en un valor UTF-8 codificado con la ayuda de una función definida por el usuario:
devolver escapar ( codificarURIComponente ( X ) ) ;
}
deja que val = 'aquí' ;
consola. registro ( 'Valor dado -> ' + vale ) ;
dejar codificarVal = codificar_utf8 ( vale ) ;
consola. registro ( 'Valor codificado -> ' + codificarVal ) ;
En estas líneas de código, realice los pasos que se indican a continuación:
- En primer lugar, defina la función “ codificar_utf8() ”que codifica la cadena pasada representada por el parámetro especificado.
- Esta codificación la realiza el “ codificarURIComponente() 'Método en la definición de la función.
- Nota: El ' no escapar() El método reemplaza cualquier secuencia de escape con el carácter representado por ella.
- Después de eso, inicialice el valor a codificar y muéstrelo.
- Ahora, invoque la función definida y pase la combinación definida de caracteres como argumentos para codificar este valor en UTF-8.
Producción
Aquí se puede dar a entender que los caracteres individuales se representan y codifican en UTF-8 de forma correspondiente.
Ejemplo 2: decodificar UTF-8 en JavaScript
La siguiente demostración de código decodifica el valor pasado (en forma de caracteres) en una representación codificada UTF-8:
devolver decodificarURIComponente ( escapar ( X ) ) ;
}
deja que val = 'çè' ;
consola. registro ( 'Valor dado -> ' + vale ) ;
dejar decodificar = decodificar_utf8 ( vale ) ;
consola. registro ( 'Valor decodificado -> ' + descodificar ) ;
En este bloque de código:
- Asimismo, define la función “ decodificar_utf8() ' que decodifica la combinación de caracteres pasada a través del ' decodificarURIComponente() ' método.
- Nota: El ' escapar() El método recupera una nueva cadena en la que varios caracteres se reemplazan por secuencias de escape hexadecimales.
- Después de eso, especifique la combinación de caracteres a decodificar y acceda a la función definida para realizar la decodificación a UTF-8 de manera adecuada.
Producción
Aquí, se puede dar a entender que el valor codificado en el ejemplo anterior se decodifica al valor predeterminado.
Enfoque 2: Codificar/decodificar UTF-8 en JavaScript utilizando los métodos “encodeURI()” y “decodeURI()”
El ' codificarURI() El método 'codifica un URI reemplazando cada instancia de varios caracteres con una serie de secuencias de escape que representan la codificación UTF-8 del carácter. En comparación con el “ codificarURIComponente() ”, este método en particular codifica caracteres limitados.
El ' decodificarURI() ”, sin embargo, decodifica el URI (codificado). Estos métodos se pueden implementar en combinación para codificar y decodificar la combinación de caracteres en un valor codificado en UTF-8.
Sintaxis (método codificarURI())
codificarURI ( X )En la sintaxis anterior, “ X ”corresponde al valor que se codificará como URI.
Valor de retorno
Este método recupera el valor codificado en forma de cadena.
Sintaxis (método decodeURI())
decodificarURI ( X )Aquí, ' X 'Representa el URI codificado que se va a decodificar.
Valor de retorno
Devuelve el URI decodificado como una cadena.
Ejemplo 1: codificación de UTF-8 en JavaScript
Esta demostración codifica la combinación de caracteres pasada en un valor UTF-8 codificado:
devolver escapar ( codificarURI ( X ) ) ;
}
deja que val = 'aquí' ;
consola. registro ( 'Valor dado -> ' + vale ) ;
dejar codificarVal = codificar_utf8 ( vale ) ;
consola. registro ( 'Valor codificado -> ' + codificarVal ) ;
Aquí, recuerde los enfoques para definir una función asignada para codificación. Ahora, aplique el método “encodeURI()” para representar la combinación de caracteres pasada como una cadena codificada en UTF-8. Después de eso, de la misma manera, defina los caracteres que se evaluarán e invoque la función definida pasando el valor definido como argumento para realizar la codificación.
Producción
Aquí, es evidente que la combinación de caracteres pasada se codifica correctamente.
Ejemplo 2: decodificar UTF-8 en JavaScript
La siguiente demostración de código decodifica el valor UTF-8 codificado (en el ejemplo anterior):
devolver decodificarURI ( escapar ( X ) ) ;
}
deja que val = 'çè' ;
consola. registro ( 'Valor dado -> ' + vale ) ;
dejar decodificar = decodificar_utf8 ( vale ) ;
consola. registro ( 'Valor decodificado -> ' + descodificar ) ;
Según este código, declara la función “ decodificar_utf8() ” que comprende el parámetro indicado que representa la combinación de caracteres a decodificar utilizando el “ decodificarURI() ' método. Ahora, especifique el valor a decodificar e invoque la función definida para aplicar la decodificación al ' UTF-8 “representación.
Producción
Este resultado implica que el valor codificado previamente se decide en consecuencia.
Método 3: codificar/decodificar UTF-8 en JavaScript utilizando expresiones regulares
Este enfoque aplica la codificación de manera que la cadena Unicode de varios bytes esté codificada en múltiples caracteres UTF-8 de un solo byte. Asimismo, la decodificación se lleva a cabo de manera que la cadena codificada se descodifica nuevamente en caracteres Unicode de varios bytes.
Ejemplo 1: codificación de UTF-8 en JavaScript
El siguiente código codifica la cadena Unicode de varios bytes en caracteres UTF-8 de un solo byte:
si ( tipo de vale != 'cadena' ) tirar nuevo Error de tecleado ( 'El parámetro ' vale 'no es una cuerda' ) ;
constante cadena_utf8 = valor. reemplazar (
/[\u0080-\u07ff]/g , // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz
función ( X ) {
era afuera = X. charCodeEn ( 0 ) ;
devolver Cadena . deCharCode ( 0xc0 | afuera >> 6 , 0x80 | afuera & 0x3f ) ; }
) . reemplazar (
/[\u0800-\uffff]/g , // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz
función ( X ) {
era afuera = X. charCodeEn ( 0 ) ;
devolver Cadena . deCharCode ( 0xe0 | afuera >> 12 , 0x80 | afuera >> 6 & 0x3F , 0x80 | afuera & 0x3f ) ; }
) ;
consola. registro ( 'Valor codificado mediante expresión regular -> ' + cadena_utf8 ) ;
}
codificarUTF8 ( 'aquí' )
En este fragmento de código:
- Definir la función “ codificarUTF8() ”que comprende el parámetro que representa el valor a codificar como “ UTF-8 ”.
- En su definición, aplique una verificación al valor pasado que no sea la cadena usando el ' tipo de 'Operador y devolver la excepción personalizada especificada a través del' tirar ”palabra clave.
- Después de eso, aplique el “ charCodeAt() ' y ' desdeCharCode() ”Métodos para recuperar el Unicode del primer carácter de la cadena y transformar el valor Unicode dado en caracteres, respectivamente.
- Finalmente, invoque la función definida pasando la secuencia de caracteres dada para codificar este valor como ' UTF-8 “representación.
Producción
Este resultado significa que la codificación se realiza correctamente.
Ejemplo 2: decodificar UTF-8 en JavaScript
En esta demostración, la secuencia de caracteres se decodifica como ' UTF-8 “representación:
si ( tipo de vale != 'cadena' ) tirar nuevo Error de tecleado ( 'El parámetro ' vale 'no es una cuerda' ) ;
constante cadena = valor. reemplazar (
/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g ,
función ( X ) {
era afuera = ( ( X. charCodeEn ( 0 ) & 0x0f ) << 12 ) | ( ( X. charCodeEn ( 1 ) & 0x3f ) << 6 ) | ( X. charCodeEn ( 2 ) & 0x3f ) ;
devolver Cadena . deCharCode ( afuera ) ; }
) . reemplazar (
/[\u00c0-\u00df][\u0080-\u00bf]/g ,
función ( X ) {
era afuera = ( X. charCodeEn ( 0 ) & 0x1f ) < '+cadena);
}
decodificarUTF8('à çè')
En este código:
- De manera similar, defina la función “ decodificarUTF8() ”que tiene el parámetro que hace referencia al valor pasado a decodificar.
- En la definición de la función, verifique la condición de cadena del valor pasado a través del botón ' tipo de ”operador.
- Ahora, aplica el “ charCodeAt() 'Método para recuperar el Unicode de la primera, segunda y tercera cadena de caracteres, respectivamente.
- Además, aplique el “ Cadena.fromCharCode() 'Método para transformar los valores Unicode en caracteres.
- Asimismo, repita este procedimiento nuevamente para recuperar el Unicode de la primera y segunda cadena de caracteres y transformar estos valores Unicode en caracteres.
- Por último, acceda a la función definida para devolver el valor decodificado UTF-8.
Producción
Aquí se puede verificar que la decodificación se realiza correctamente.
Conclusión
La codificación/decodificación en representación UTF-8 se puede realizar mediante el botón “ enodeURIComponent()” y ' decodificarURIComponente() métodos, el “ codificarURI() ' y ' decodificarURI() ”, o utilizando las expresiones regulares.