Comprehensive Guide to Data Encoding/Decoding
Data encoding is an essential skill in web development. Learn about major encoding methods like Base64 and URL encoding, and how to apply them in practice.
1. Encoding Basic Concepts
Why is Encoding Needed?
- Transmit binary data as text
- Safely include special characters in URLs
- Ensure data integrity
- Compatibility across various systems
2. Base64 Encoding Deep Dive
What is Base64?
A method to represent binary data using 64 ASCII characters.
// Base64 encoding
const text = "Hello, World!";
const encoded = btoa(text);
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="
// Base64 decoding
const decoded = atob(encoded);
console.log(decoded); // "Hello, World!"
Practical Applications
- Convert images to Data URLs
- API authentication tokens
- Email attachments
- Include binary data in JSON
3. URL Encoding and Usage
Why URL Encoding is Needed
Certain characters in URLs (?, &, =, #, /, etc.) have special meanings and require encoding.
// URL encoding
const param = "안녕하세요! Hello?";
const encoded = encodeURIComponent(param);
console.log(encoded);
// "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94!%20Hello%3F"
// URL decoding
const decoded = decodeURIComponent(encoded);
console.log(decoded); // "안녕하세요! Hello?"
Function comparison
encodeURI(): Encode entire URL (preserves /, ?, & etc.)encodeURIComponent(): Encode query parameters (encodes all special chars)