当前位置:首页 > JavaScript

js实现转码

2026-03-13 22:58:33JavaScript

转码实现方法

在JavaScript中,常见的转码需求包括URL编码、Base64编码、Unicode转码等。以下是几种常见转码场景的实现方法。

URL编码

使用encodeURIComponent()对URL参数进行编码,确保特殊字符被正确处理:

const originalString = "Hello World! 你好";
const encodedString = encodeURIComponent(originalString);
console.log(encodedString); // 输出:Hello%20World!%20%E4%BD%A0%E5%A5%BD

使用decodeURIComponent()进行解码:

const decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // 输出原始字符串

Base64编码

使用btoa()进行Base64编码:

js实现转码

const base64Encoded = btoa("Hello World");
console.log(base64Encoded); // 输出:SGVsbG8gV29ybGQ=

使用atob()进行Base64解码:

const base64Decoded = atob(base64Encoded);
console.log(base64Decoded); // 输出原始字符串

注意:btoaatob仅支持ASCII字符,处理非ASCII字符需要先转换:

js实现转码

const utf8ToBase64 = (str) => btoa(unescape(encodeURIComponent(str)));
const base64ToUtf8 = (str) => decodeURIComponent(escape(atob(str)));

Unicode转码

将字符串转换为Unicode编码:

function toUnicode(str) {
    return str.split('').map(char => 
        '\\u' + char.charCodeAt(0).toString(16).padStart(4, '0')
    ).join('');
}
console.log(toUnicode("你好")); // 输出:\u4f60\u597d

将Unicode编码转回字符串:

function fromUnicode(unicodeStr) {
    return unicodeStr.replace(/\\u[\dA-F]{4}/gi, 
        match => String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16))
    );
}

字符集转换

使用TextEncoderTextDecoder处理不同字符集:

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

const utf8Array = encoder.encode("你好");
const decodedStr = decoder.decode(utf8Array);

注意事项

  1. URL编码时,encodeURI()不会编码/?:@&=+$#等保留字符,而encodeURIComponent()会编码所有非标准字符
  2. Base64编码的字符串可能包含+/=等特殊字符,在URL中使用时需要替换:
    const urlSafeBase64 = base64Encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
  3. 处理大文件转码时建议使用流式处理,避免内存问题

标签: js
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…