JavaScript全局函数研究_手写模仿实现_02：decodeURI、decodeURIComponent、encodeURI、encodeURIComponent

最新推荐文章于 2025-04-30 16:23:35 发布

It'sMyGo

最新推荐文章于 2025-04-30 16:23:35 发布

阅读量1.3k

点赞数 20

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142732870

版权

JavaScript全局函数研究_手写模仿实现：decodeURI、decodeURIComponent、encodeURI、encodeURIComponent

在Web开发中，处理URI（统一资源标识符）时，常常需要对字符串进行编码和解码，以确保URI的正确性和安全性。JavaScript提供了四个全局函数用于URI的编码和解码，它们分别是encodeURI、encodeURIComponent、decodeURI、decodeURIComponent。本文将深入研究这些函数的作用、用法，并尝试手写模仿实现它们，以加深对URI编码解码机制的理解。

一、URI编码解码基础

在介绍具体函数之前，先了解一下URI编码的背景。

1. 为什么需要编码

URI只能使用ASCII字符集中的一部分字符，某些字符在URI中具有特殊含义（如?、&、#等）。为了在URI中安全传输数据，需要将非安全的字符进行编码。

2. 编码方式

URI编码通常采用百分号编码（Percent-Encoding），即用%后跟两位十六进制数表示字符的ASCII码。例如，空格字符' '的ASCII码是32，转换为十六进制是20，因此编码后为%20。

二、encodeURI()

1. 基础介绍

encodeURI()函数用于对整个URI进行编码，它会保留URI中具有特殊含义的字符，例如:、/、?、#等。这些字符在URI中具有分隔作用，不应被编码。

2. 语法

encodeURI(URI)

URI：要编码的完整URI字符串。

3. 示例代码

const uri = 'https://www.example.com/搜索?q=JavaScript 编码';
const encodedURI = encodeURI(uri);
console.log(encodedURI);
// 输出: https://www.example.com/%E6%90%9C%E7%B4%A2?q=JavaScript%20%E7%BC%96%E7%A0%81

4. 手写模仿实现

要手写模仿encodeURI()的功能，需要了解哪些字符会被编码，哪些字符会被保留。根据规范，以下字符不会被编码：

字母数字字符：A-Z a-z 0-9
保留符号：;,/?:@&=+$-_.!~*'()#

实现代码

function myEncodeURI(str) {
   
  return String(str).replace(/[^A-Za-z0-9;/?:@&=+$,\-_.!~*'()#]/g, function(c) {
   
    return '%' + c.charCodeAt(0).toString(16).toUpperCase();
  });
}

const uri = 'https://www.example.com/搜索?q=JavaScript 编码';
const encodedURI = myEncodeURI(uri)