Herramientas para desarrolladores · Codificador y decodificador Base64
Por qué btoa() incluye emoji y cómo codificar UTF-8 en Base64 en JavaScript
· Cómo funciona
base64 Unicode codificación
btoa() solo acepta caracteres hasta U+00FF, por lo que se arroja texto acentuado, CJK y emoji. Esta publicación muestra lo que realmente espera la función y cómo TextEncoder le proporciona una cadena UTF-8 Base64 correcta.
Por qué btoa puede utilizar Unicode y codificar erróneamente un acento en silencio
Llamar a btoa("😀") arroja InvalidCharacterError porque el emoji no puede caber en una unidad de código de un solo byte. Un error más sutil es btoa("é"): la é precompuesta es U+00E9, por debajo de 256, por lo que btoa la acepta pero codifica Latin-1 byte E9, no UTF-8 bytes C3 A9. El mismo acento visible escrito como e más una marca combinada puede arrojar porque la marca está fuera del rango aceptado. La abreviatura del libro "un acento arroja" necesita esta calificación: una cadena puede fallar ruidosamente o silenciosamente producir bytes incorrectos.
Lo que realmente codifica btoa(): una cadena binaria de unidades de código 0–255: por qué la función se diseñó en torno a Latin-1 bytes en lugar de texto Unicode
btoa consume una "cadena binaria": cada unidad de código de caracteres JavaScript debe estar en el rango de 0 a 255 y representa un byte. No comprende la codificación, el idioma ni la normalización de texto Unicode. Un emoji astral está representado por dos unidades de código sustituto UTF-16, ambas mucho más grandes que 255, por lo que enviar la cadena JavaScript sin formato directamente no puede funcionar. Trate la salida como una codificación de bytes, no de caracteres abstractos.
Primero UTF-8, segundo Base64: por qué el texto debe convertirse en bytes antes de que se aplique cualquier alfabeto Base64
TextEncoder primero convierte una cadena de JavaScript en su secuencia UTF-8 byte. Luego, convierta cada byte en un carácter de cadena binaria y pase esa cadena binaria a btoa, o use otra API que acepte bytes directamente. Para decodificar, atob devuelve la cadena binaria; recupere sus valores de bytes y entréguelos a TextDecoder("utf-8"). ToolAcre utiliza un decodificador estricto que rechaza UTF-8 con formato incorrecto en lugar de insertar silenciosamente caracteres de reemplazo.
Ejemplo resuelto: codificar 'café 😀' con TextEncoder y btoa: la secuencia de bytes, la cadena binaria intermedia y la salida final
Para el texto literal café 😀, los UTF-8 bytes son 63 61 66 C3 A9 20 F0 9F 98 80 en hexadecimal: ASCII c-a-f, dos bytes para é, un espacio y cuatro bytes para el emoji. La base64 de estos diez bytes es Y2Fmw6kg8J+YgA==. El relleno y el alfabeto describen únicamente los bytes; no etiquetan el idioma. Compare una falla directa de btoa("café 😀") con el modo UTF-8 de ToolAcre, luego decodifique su resultado y verifique que sobreviva el mismo acento visible y emoji.
El viejo truco de unescape(encodeURIComponent()) y por qué es un truco: qué hace bajo el capó y por qué no se recomienda
Una solución histórica es btoa(unescape(encodeURIComponent(text))). encodeURIComponent codifica por ciento UTF-8 y unescape vuelve a empaquetar tripletes porcentuales como unidades de código único, pero unescape está en desuso, es difícil de leer y resulta incómodo con sustitutos solitarios mal formados. Hace que una conversión parezca un procesamiento de URL incluso cuando no existe ninguna URL. TextEncoder establece claramente el límite previsto: el texto se convierte en bytes una vez y Base64 opera solo después de eso.
Decodificación por el otro lado: emparejar atob con TextDecoder para que el viaje de ida y vuelta no tenga pérdidas
Después de atob, no llame a decodeURIComponent en bytes binarios arbitrarios y espere que se conviertan en texto. Convierta códigos de caracteres a Uint8Array y páselo a través de TextDecoder. En el ejemplo del café 😀, el resultado es la secuencia UTF-8 original de diez bytes y luego la cadena original. Si Base64 se decodifica en bytes de imagen o de archivo comprimido, es posible que no represente texto UTF-8 válido en absoluto; ToolAcre informa que, en lugar de pretender que los datos binarios son prosa legible.
Lo que esto no cubre: codificación de archivos y blobs binarios, variantes de URL base64 y transmisión de entradas grandes
Esta explicación se refiere al texto codificado como UTF-8. File and Blob Base64, Base64url para segmentos JWT y codificación incremental de datos de varios gigabytes tienen diferentes interfaces o necesidades de memoria. Base64 tampoco cifra un token: cualquiera que lo tenga puede decodificar los bytes. El decodificador puede aceptar espacios en blanco y relleno faltantes comunes, pero la interoperabilidad aún depende de saber si la carga útil es texto o datos binarios arbitrarios.
Conclusión: codifique bytes, no cadenas, y verifique el recorrido de ida y vuelta: cómo el codificador y descodificador Base64 realiza el paso UTF-8 por usted para que los acentos, CJK y emoji sobrevivan
Codifique bytes, no cadenas de JavaScript sin formato, luego verifique el recorrido de ida y vuelta. El codificador y decodificador Base64 realiza los pasos TextEncoder y TextDecoder por usted mientras mantiene el texto pegado en el navegador. RFC 4648 especifica el alfabeto y el relleno; UTF-8 proporciona el contrato independiente de carácter a byte. Mezclar esas dos capas es la raíz tanto de InvalidCharacterError como de la silenciosa corrupción Latin-1.