Command Palette

Search for a command to run...

Encoding API: Codificación y Decodificación de Texto

Aprende a codificar y decodificar texto entre diferentes encodings usando TextEncoder y TextDecoder para manejar datos binarios eficientemente.

Lectura: 10 min
Nivel: Principiante

TL;DR - Resumen rápido

  • TextEncoder convierte strings en Uint8Array usando UTF-8 por defecto
  • TextDecoder convierte Uint8Array en strings usando la codificación especificada
  • UTF-8 es la codificación por defecto y es compatible con todos los caracteres Unicode
  • Ambas APIs son síncronas y no usan Promises
  • Reutiliza instancias de TextEncoder/TextDecoder para mejor rendimiento
  • Son ideales para trabajar con datos binarios en WebSockets, Fetch API y File API

Introducción a Encoding API

La Encoding API proporciona una forma eficiente de codificar y decodificar texto entre diferentes codificaciones de caracteres. Anteriormente, los desarrolladores usaban funciones como encodeURIComponent/decodeURIComponent o bibliotecas de terceros, pero la Encoding API ofrece una solución nativa y más eficiente.

Esta API consta de dos interfaces principales: TextEncoder para convertir strings en datos binarios (Uint8Array) y TextDecoder para convertir datos binarios en strings. Ambas son síncronas y soportan múltiples codificaciones, aunque UTF-8 es la más común.

  • Conversión eficiente entre strings y datos binarios
  • Soporte para múltiples codificaciones (UTF-8, UTF-16, ISO-8859-1, etc.)
  • API síncrona y simple de usar
  • Compatible con WebSockets, Fetch API y File API
  • Soporte para manejar errores de codificación

UTF-8 por Defecto

TextEncoder siempre usa UTF-8 como codificación, que es el estándar web y soporta todos los caracteres Unicode. TextDecoder puede usar diferentes codificaciones, pero UTF-8 es la más recomendada por su compatibilidad y eficiencia.

TextEncoder

TextEncoder es una interfaz que convierte strings en una secuencia de bytes (Uint8Array). Es especialmente útil cuando necesitas enviar texto a través de APIs que esperan datos binarios, como WebSockets, o cuando trabajas con archivos y streams.

textencoder-basico.js
Loading code...

El método encode() convierte el string en un Uint8Array usando UTF-8. Este método es síncrono y no lanza excepciones, ya que UTF-8 puede codificar cualquier carácter Unicode. El resultado es un array de bytes que puedes enviar a través de cualquier API que acepte datos binarios.

  1. Crea una instancia de TextEncoder con new TextEncoder()
  2. Llama a encode(string) para convertir texto a Uint8Array
  3. Envía los bytes a través de WebSocket, Fetch o File API
  4. Reutiliza la misma instancia de encoder para mejor rendimiento
  5. Usa TextDecoder para convertir de vuelta a string cuando sea necesario

Codificación UTF-8

UTF-8 usa un número variable de bytes por carácter: 1 byte para caracteres ASCII, 2-3 bytes para caracteres más comunes, y 4 bytes para caracteres raros. Esto lo hace muy eficiente para textos en español, inglés y otros idiomas europeos.

TextDecoder

TextDecoder es una interfaz que convierte una secuencia de bytes (Uint8Array) en strings. Es el complemento perfecto de TextEncoder y se usa para decodificar datos recibidos de APIs que devuelven datos binarios, como WebSockets o Fetch API.

textdecoder-basico.js
Loading code...

El método decode() convierte el Uint8Array en un string usando la codificación especificada en el constructor. Por defecto usa UTF-8, pero puedes especificar otras codificaciones como 'utf-16', 'iso-8859-1', etc. El método puede manejar streams parciales usando el parámetro stream.

Manejo de Streams

TextDecoder puede decodificar streams de datos parciales usando el parámetro stream. Esto es útil cuando recibes datos en fragmentos, como en WebSockets o Fetch con streams. El decoder mantiene el estado interno para reconstruir caracteres multibyte.

Codificaciones Comunes

Aunque UTF-8 es la codificación más común y recomendada, TextDecoder soporta múltiples codificaciones para diferentes casos de uso. Es importante entender cuándo usar cada una para evitar problemas de codificación.

codificaciones-varias.js
Loading code...

Las codificaciones más comunes son UTF-8 (universal), UTF-16 (usado internamente por JavaScript), y Latin-1 (ISO-8859-1) para datos heredados. UTF-8 es siempre la mejor opción para nuevos proyectos debido a su compatibilidad y eficiencia.

Codificaciones Obsoletas

Algunas codificaciones como 'utf-7' o 'iso-2022-jp' están obsoletas y no son soportadas por todos los navegadores. Siempre usa codificaciones estándar como UTF-8, UTF-16 o ISO-8859-1 para máxima compatibilidad.

Ejemplo Completo

Este ejemplo completo muestra cómo usar Encoding API para comunicarse con un WebSocket que espera datos binarios. Codificamos los mensajes antes de enviarlos y decodificamos los mensajes recibidos.

websocket-con-encoding.js
Loading code...

Este patrón es muy común en aplicaciones que usan WebSockets con datos binarios. Encoding API hace que la conversión entre strings y bytes sea simple y eficiente, sin necesidad de bibliotecas de terceros.

Reutilizar Encoder y Decoder

Es una buena práctica reutilizar instancias de TextEncoder y TextDecoder en lugar de crear nuevas cada vez. Esto mejora el rendimiento, especialmente en aplicaciones que envían/reciben muchos mensajes.

Errores Comunes

Al trabajar con Encoding API, hay varios errores comunes que puedes encontrar. Conocer estos errores y cómo evitarlos te ayudará a escribir código más robusto.

errores-comunes.js
Loading code...

Los errores más comunes incluyen no especificar la codificación correcta en TextDecoder, no manejar errores de decodificación, y no reutilizar instancias de encoder/decoder. Estos problemas pueden causar caracteres incorrectos, errores en tiempo de ejecución y rendimiento subóptimo.

Caracteres Invlidos

TextDecoder puede encontrar bytes inválidos al decodificar. Por defecto, reemplaza estos bytes con el carácter de reemplazo (�). Puedes cambiar este comportamiento usando la opción fatal en el constructor para que lance excepciones en lugar de reemplazar.

Resumen: Encoding API

Conceptos principales:

  • TextEncoder convierte strings en Uint8Array usando UTF-8 por defecto
  • TextDecoder convierte Uint8Array en strings usando la codificación especificada
  • Ambas APIs son síncronas y no usan Promises
  • UTF-8 es la codificación por defecto y soporta todos los caracteres Unicode
  • TextDecoder puede manejar streams parciales usando el parámetro stream

Mejores prácticas:

  • Usa siempre UTF-8 para máxima compatibilidad y eficiencia
  • Reutiliza instancias de TextEncoder y TextDecoder para mejor rendimiento
  • Especifica la codificación correcta en TextDecoder para datos heredados
  • Maneja errores de decodificación con la opción fatal
  • Usa Encoding API con WebSockets, Fetch API y File API para datos binarios