当前位置:首页 > JavaScript

js 实现urlencode

2026-04-06 11:05:32JavaScript

URL编码的基本概念

URL编码(Percent-Encoding)是一种将特殊字符转换为安全传输格式的机制。通过将字符替换为%后跟两位十六进制值的形式,确保URL中不会出现歧义字符(如空格、&=等)。

原生JavaScript实现方法

使用内置函数encodeURIComponent()可完成大部分需求:

const encoded = encodeURIComponent('测试&value=1');
console.log(encoded); // 输出:"%E6%B5%8B%E8%AF%95%26value%3D1"

注意

  • 该方法会对!, ', (, ), *, -, _, ~, . 等字符保留原样
  • 若需编码整个URL(含协议和域名),应使用encodeURI()

手动实现方案

如需自定义编码逻辑,可通过字符遍历处理:

function customUrlEncode(str) {
  return str.split('').map(char => {
    const code = char.charCodeAt(0);
    return code > 0x20 && code < 0x7F && !/[<>#%{}|\^~[]`]/.test(char) 
      ? char 
      : '%' + code.toString(16).toUpperCase();
  }).join('');
}

关键逻辑

  1. 检查ASCII码范围(0x20-0x7F)
  2. 排除保留字符和危险字符
  3. 非安全字符转为%XX格式

特殊场景处理

处理表单数据时需注意:

const formData = { name: "张三", age: 25 };
const encodedParams = Object.entries(formData)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join('&');
// 结果:"name=%E5%BC%A0%E4%B8%89&age=25"

解码方法

使用decodeURIComponent()还原数据:

js 实现urlencode

const decoded = decodeURIComponent('%E6%B5%8B%E8%AF%95');
console.log(decoded); // 输出:"测试"

标签: jsurlencode
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

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

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: fun…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…

js实现排序

js实现排序

数组排序方法 JavaScript提供了内置的sort()方法用于数组排序。默认情况下,sort()将元素转换为字符串并按照Unicode码点排序。对于数字排序,需传入比较函数。 const num…