Alat pengembang · Encoder & decoder Base64
Mengapa btoa() menggunakan emoji dan cara menyandikan Base64 UTF-8 di JavaScript
· Cara kerjanya
base64 unicode pengkodean
btoa() hanya menerima karakter hingga U+00FF, jadi teks beraksen, CJK, dan lemparan emoji. Posting ini menunjukkan fungsi yang sebenarnya diharapkan dan bagaimana TextEncoder memberi Anda string UTF-8 Base64 yang benar.
Mengapa btoa dapat menggunakan Unicode—dan secara diam-diam salah mengkodekan sebuah aksen
Memanggil btoa("😀") akan memunculkan InvalidCharacterError karena emoji tidak dapat dimasukkan ke dalam satu unit kode berukuran byte. Kesalahan yang lebih halus adalah btoa("é"): prekomposisi é adalah U+00E9, di bawah 256, jadi btoa menerimanya tetapi mengkodekan Latin-1 byte E9, bukan UTF-8 byte C3 A9. Aksen terlihat sama yang ditulis sebagai e ditambah tanda gabungan dapat muncul karena tanda tersebut berada di luar rentang yang diterima. Singkatan dari buku kerja “an aksen throws” memerlukan kualifikasi ini: sebuah string bisa gagal dengan keras atau diam-diam menghasilkan byte yang salah.
Apa yang sebenarnya dikodekan oleh btoa(): string biner dari unit kode 0–255 — mengapa fungsi tersebut dirancang berdasarkan bahasa Latin-1 bytes, bukan teks Unicode
btoa menggunakan "string biner": setiap unit kode karakter JavaScript harus berada dalam rentang 0–255 dan mewakili satu byte. Itu tidak memahami pengkodean teks Unicode, bahasa atau normalisasi. Emoji astral diwakili oleh dua unit kode pengganti UTF-16, keduanya jauh lebih besar dari 255, sehingga mengirimkan string JavaScript mentah secara langsung tidak dapat berfungsi. Perlakukan output sebagai pengkodean byte, bukan karakter abstrak.
UTF-8 pertama, Base64 kedua — mengapa teks harus menjadi byte sebelum alfabet Base64 diterapkan
TextEncoder mengubah string JavaScript menjadi urutan byte UTF-8 terlebih dahulu. Kemudian ubah setiap byte menjadi karakter string biner dan teruskan string biner tersebut ke btoa, atau gunakan API lain yang menerima byte secara langsung. Untuk decoding, atob mengembalikan string biner; memulihkan nilai byte-nya dan memberikannya ke TextDecoder("utf-8"). ToolAcre menggunakan decoder ketat yang menolak UTF-8 yang salah format alih-alih memasukkan karakter pengganti secara diam-diam.
Contoh praktis: pengkodean 'café 😀' dengan TextEncoder dan btoa — urutan byte, string biner perantara, dan hasil akhir
Untuk kafe teks literal 😀, UTF-8 byte adalah 63 61 66 C3 A9 20 F0 9F 98 80 dalam heksadesimal: ASCII c-a-f, dua byte untuk é, satu spasi, dan empat byte untuk emoji. Base64 dari sepuluh byte ini adalah Y2Fmw6kg8J+YgA==. Padding dan alfabet hanya menjelaskan byte; mereka tidak memberi label pada bahasanya. Bandingkan kegagalan btoa("café 😀") langsung dengan mode UTF-8 ToolAcre, lalu dekode hasilnya dan verifikasi aksen dan emoji yang terlihat sama tetap ada.
Trik unescape(encodeURIComponent()) yang lama dan mengapa ini merupakan peretasan — apa yang dilakukannya dan mengapa tidak disarankan
Solusi historisnya adalah btoa(unescape(encodeURIComponent(text))). encodeURIComponent persen-mengkodekan UTF-8 dan unescape mengemas ulang persen kembar tiga sebagai unit kode tunggal, tetapi unescape sudah tidak digunakan lagi, sulit dibaca dan tidak nyaman di sekitar pengganti tunggal yang salah format. Ini membuat konversi terlihat seperti URL sedang diproses meskipun tidak ada URL. TextEncoder menyatakan batas yang diinginkan dengan jelas: teks menjadi byte satu kali, dan Base64 hanya beroperasi setelah itu.
Decoding di sisi lain - memasangkan atob dengan TextDecoder sehingga perjalanan pulang pergi tidak ada ruginya
Setelah atob, jangan panggil decodeURIComponent pada byte biner sembarang dan berharap menjadi teks. Konversikan kode karakter menjadi Uint8Array dan teruskan melalui TextDecoder. Di kafe 😀 contoh hasilnya adalah urutan UTF-8 sepuluh byte asli, lalu string asli. Jika Base64 diterjemahkan menjadi byte gambar atau file terkompresi, itu mungkin tidak mewakili teks UTF-8 yang valid sama sekali; ToolAcre melaporkan bahwa alih-alih berpura-pura, data biner adalah prosa yang dapat dibaca.
Apa yang tidak tercakup di sini — pengkodean file dan gumpalan biner, varian url base64, dan streaming input besar
Penjelasan ini menyangkut teks yang dikodekan sebagai UTF-8. File dan Blob Base64, Base64url untuk segmen JWT dan pengkodean tambahan data multi-gigabyte memiliki antarmuka atau kebutuhan memori yang berbeda. Base64 juga tidak mengenkripsi token: siapa pun yang memegangnya dapat memecahkan kode byte. Decoder dapat menerima padding dan spasi yang hilang, namun interoperabilitas masih bergantung pada mengetahui apakah payload berupa teks atau data biner sembarang.
Kesimpulan: enkode byte, bukan string, dan periksa perjalanan pulang pergi — bagaimana encoder & decoder Base64 melakukan langkah UTF-8 untuk Anda sehingga aksen, CJK, dan emoji tetap bertahan
Enkode byte, bukan string JavaScript mentah, lalu periksa bolak-balik. Encoder & decoder Base64 melakukan langkah-langkah TextEncoder dan TextDecoder untuk Anda sambil tetap menempelkan teks di browser. RFC 4648 menentukan alfabet dan padding; UTF-8 menyediakan kontrak karakter-ke-byte yang terpisah. Mencampur kedua lapisan tersebut adalah akar dari InvalidCharacterError dan korupsi Latin-1 yang tenang.