当前位置:首页 > JavaScript

js实现转码

2026-04-05 17:11:17JavaScript

使用 encodeURIComponentdecodeURIComponent

encodeURIComponent 用于对 URI 组件进行编码,适用于 URL 参数部分。decodeURIComponent 用于解码。

const originalText = "Hello, 世界!";
const encodedText = encodeURIComponent(originalText); // "Hello%2C%20%E4%B8%96%E7%95%8C%21"
const decodedText = decodeURIComponent(encodedText); // "Hello, 世界!"

使用 btoaatob(Base64)

btoa 将字符串编码为 Base64,atob 解码 Base64 字符串。注意:仅支持 ASCII 字符,非 ASCII 字符需先处理。

const text = "Hello, world!";
const encoded = btoa(text); // "SGVsbG8sIHdvcmxkIQ=="
const decoded = atob(encoded); // "Hello, world!"

// 处理非 ASCII 字符
const utf8Text = "你好";
const encodedUtf8 = btoa(encodeURIComponent(utf8Text)); // "JUU0JUJEJUEwJUU1JUE1JUJE"
const decodedUtf8 = decodeURIComponent(atob(encodedUtf8)); // "你好"

使用 TextEncoderTextDecoder

处理 UTF-8 编码和解码,适用于现代浏览器。

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const text = "Hello, 世界!";
const encodedArray = encoder.encode(text); // Uint8Array
const decodedText = decoder.decode(encodedArray); // "Hello, 世界!"

处理 URL 编码的哈希或路径

encodeURIdecodeURI 用于完整 URL 编码,不编码特殊字符(如 /, :)。

const url = "https://example.com/路径?q=查询";
const encodedUrl = encodeURI(url); // "https://example.com/%E8%B7%AF%E5%BE%84?q=%E6%9F%A5%E8%AF%A2"
const decodedUrl = decodeURI(encodedUrl); // 原始 URL

处理二进制数据(如 ArrayBuffer)

通过 Uint8ArrayString.fromCharCode 转换二进制数据。

js实现转码

// 字符串转 ArrayBuffer
function stringToArrayBuffer(str) {
  const encoder = new TextEncoder();
  return encoder.encode(str).buffer;
}

// ArrayBuffer 转字符串
function arrayBufferToString(buffer) {
  const decoder = new TextDecoder();
  return decoder.decode(new Uint8Array(buffer));
}

const buffer = stringToArrayBuffer("ABC");
const str = arrayBufferToString(buffer); // "ABC"

注意事项

  • encodeURIComponent 编码范围更广,适合 URL 参数。
  • Base64 编码可能增加数据体积,但适合二进制数据或简单加密。
  • 非 ASCII 字符需结合 encodeURIComponent 和 Base64 处理。
  • 现代浏览器推荐使用 TextEncoder/TextDecoder 处理 UTF-8。

标签: js
分享给朋友:

相关文章

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…

js实现左右滑动

js实现左右滑动

实现左右滑动的 JavaScript 方法 监听触摸事件 通过 touchstart、touchmove 和 touchend 事件来检测用户的手势操作。记录触摸的起始位置和移动距离,判断滑动方向。…