当前位置:首页 > JavaScript

js实现urlencode

2026-02-01 03:25:38JavaScript

URL编码简介

URL编码(Percent-Encoding)是将特殊字符转换为%后跟两位十六进制数的格式。JavaScript提供原生方法实现这一功能。

使用encodeURIComponent

encodeURIComponent()是标准方法,会对除字母、数字和-_.!~*'()外的所有字符进行编码:

const encoded = encodeURIComponent('测试&data=123');
// 输出 "%E6%B5%8B%E8%AF%95%26data%3D123"

使用encodeURI

encodeURI()用于编码完整URL,不会编码保留字符(如:/?#[]@):

const encoded = encodeURI('https://example.com/测试');
// 输出 "https://example.com/%E6%B5%8B%E8%AF%95"

手动实现编码

需要自定义编码规则时可用此方法:

function customUrlEncode(str) {
  return str.split('').map(char => {
    const code = char.charCodeAt(0);
    return code > 128 ? '%' + code.toString(16).toUpperCase() : char;
  }).join('');
}

解码方法

使用decodeURIComponent()还原编码后的字符串:

js实现urlencode

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

注意事项

  • 编码查询参数时优先使用encodeURIComponent
  • 处理完整URL时注意区分encodeURIencodeURIComponent的使用场景
  • 空格会被编码为%20(而非+

标签: jsurlencode
分享给朋友:

相关文章

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…