当前位置:首页 > JavaScript

js实现编码

2026-04-06 04:16:14JavaScript

编码实现方法

JavaScript提供了多种编码方式来处理字符串和URL编码需求。以下是常见的编码方法及其实现方式。

URL编码

使用encodeURIComponent对URL参数进行编码,适用于编码查询字符串部分:

const param = '测试&参数';
const encodedParam = encodeURIComponent(param); // 输出 "%E6%B5%8B%E8%AF%95%26%E5%8F%82%E6%95%B0"

使用encodeURI编码完整URL(保留协议和域名特殊字符):

const url = 'https://example.com/测试路径?name=值';
const encodedUrl = encodeURI(url); // 保留:/?&=等符号

Base64编码解码

通过btoaatob实现Base64转换(仅支持ASCII字符):

const text = 'Hello World';
const encoded = btoa(text); // "SGVsbG8gV29ybGQ="
const decoded = atob(encoded); // 还原原始字符串

处理Unicode字符需先转换:

function base64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode('0x' + p1)));
}

HTML实体编码

使用textContent自动转义或手动替换:

const div = document.createElement('div');
div.textContent = '<script>alert(1)</script>';
const encodedHtml = div.innerHTML; // "&lt;script&gt;alert(1)&lt;/script&gt;"

二进制数据编码

通过TextEncoder处理UTF-8编码:

const encoder = new TextEncoder();
const uint8Array = encoder.encode('你好'); // Uint8Array(6) [228, 189, 160, 229, 165, 189]

十六进制编码

转换为十六进制字符串:

js实现编码

const buffer = new Uint8Array([72, 101, 108, 108, 111]);
const hexString = Array.from(buffer).map(b => b.toString(16).padStart(2, '0')).join(''); // "48656c6c6f"

注意事项

  • URL编码时区分encodeURIComponent(编码所有非字母数字字符)和encodeURI(保留完整URL结构)
  • Base64编码非ASCII内容需先进行URI组件编码
  • 处理二进制数据时注意字节序和编码格式
  • 现代浏览器支持TextEncoder/TextDecoderAPI处理文本编码转换

标签: js
分享给朋友:

相关文章

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…

js实现图片滚动

js实现图片滚动

图片滚动的实现方法 使用CSS动画实现 通过CSS的animation和@keyframes可以实现简单的图片滚动效果。这种方法适合静态图片的无缝循环滚动。 <style> .scr…

js实现导航菜单

js实现导航菜单

使用HTML和CSS创建基础结构 导航菜单的基础结构通常由HTML的无序列表(<ul>)和列表项(<li>)组成,每个列表项包含一个链接(<a>)。CSS用于样式化…