js实现编码
JavaScript 实现编码的方法
JavaScript 提供了多种编码方式,可以根据不同的需求选择合适的编码方法。以下是常见的几种编码实现方式:
URL 编码
使用 encodeURIComponent 和 encodeURI 对 URL 进行编码,避免特殊字符导致的 URL 解析问题。
const url = 'https://example.com/?name=张三&age=20';
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // 输出编码后的 URL
encodeURI 用于编码整个 URL,而 encodeURIComponent 用于编码 URL 的某一部分(如查询参数)。
Base64 编码
使用 btoa 和 atob 进行 Base64 编码和解码。
const text = 'Hello, World!';
const encodedText = btoa(text); // Base64 编码
console.log(encodedText);
const decodedText = atob(encodedText); // Base64 解码
console.log(decodedText);
HTML 实体编码
使用 textContent 或 innerText 自动处理 HTML 实体编码,避免 XSS 攻击。
const element = document.createElement('div');
element.textContent = '<script>alert("XSS")</script>';
console.log(element.innerHTML); // 输出编码后的 HTML 实体
自定义编码函数
可以手动实现特定需求的编码逻辑,例如替换特定字符。
function customEncode(str) {
return str.replace(/[&<>"']/g, function(match) {
return {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[match];
});
}
const encoded = customEncode('<div>Hello</div>');
console.log(encoded); // 输出 <div>Hello</div>
使用 TextEncoder 进行 UTF-8 编码
现代浏览器支持 TextEncoder 和 TextDecoder 进行 UTF-8 编码和解码。

const encoder = new TextEncoder();
const encoded = encoder.encode('你好'); // 返回 Uint8Array
console.log(encoded);
const decoder = new TextDecoder();
const decoded = decoder.decode(encoded);
console.log(decoded); // 输出 "你好"
注意事项
- URL 编码时注意区分
encodeURI和encodeURIComponent的使用场景。 - Base64 编码仅支持 ASCII 字符,对 Unicode 字符需先转换为 UTF-8。
- HTML 实体编码主要用于防止 XSS 攻击。
TextEncoder和TextDecoder是较新的 API,需确保目标环境支持。






