JavaScript URL编码解码指南：encodeURI与encodeURIComponent区别及应用场景

URL是访问互联网资源的地址标识，每个URL都指向网络上的唯一资源。在实际应用中，URL有时可能包含特殊字符或需要动态操作。

本文将探讨在JavaScript中处理URL的现代技术，并解答与JavaScript中URL编码和解码相关的关键问题。

当在浏览器中输入搜索内容时，通常会返回多个搜索结果。这些结果的格式往往较为复杂，包含文本以及%、+、?、=、&、<、>等特殊字符。

在JavaScript中使用URL

在对URL进行编码和解码之前，首先需要掌握如何在JavaScript中操作URL。这对于构建、解析和操作网址非常有用。现代JavaScript提供了一个内置的URL类，它提供了处理URL的强大功能：

创建URL对象：要在JavaScript中使用URL，可以使用上述语法创建URL对象。

const url = new URL("https://juejin.cn/editor?q=hello world");

访问URL组件：一旦创建了URL对象，就可以访问其各个组成部分。可以访问以下组件：

url.protocol：返回URL的协议（例如“https:”）
url.hostname：返回URL的主机名（例如“juejin.cn”）
url.pathname：返回URL的路径（例如“/editor”）
url.searchParams：返回包含查询参数的URLSearchParams对象

console.log(url.protocol);     // Output: https:
console.log(url.hostname);     // Output: juejin.cn
console.log(url.pathname);     // Output: /editor
console.log(url.searchParams); // Output: q=hello+world

将URL对象或组件转换为字符串：可以使用toString()JavaScript方法获取URL，或者在本例中获取字符串形式的URL组件。

console.log(url.searchParams.toString());
// Output: q=hello+world

获取当前页面URL：要获取当前所在网页的URL，请使用window.location.href属性。

const currentUrl = window.location.href;
console.log(currentUrl);

修改URL组件：可以使用searchParams属性轻松修改URL的查询参数。

url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

这将以编码格式将“q”查询参数的值从“hello world”更新为“new+query”。

构造新的URL：还可以通过组合不同的组件或修改现有的组件来构造新的URL。

const newURL = new URL("https://juejin.cn");
newURL.pathname = "/new-path";
newURL.searchParams.set("q", "new query");
console.log(newURL.toString())
// Output: https://juejin.cn/new-path?q=new+query

上面的代码行首先创建一个URL对象，设置路径名，然后设置查询参数，构造一个新的URL。最后将结果转换为字符串以便于阅读。

建议尝试运行上面提供的所有代码片段，以深入了解如何在JavaScript中使用URL。

现在我们已经学习了如何在JavaScript中使用URL，接下来我们将学习如何在JavaScript中对URL进行编码和解码。

在JavaScript中编码URL

对URL进行编码本质上意味着将URL中的特殊字符转换为可以在互联网上正确传输的格式。

此过程是必要的，因为URL中的某些字符（例如空格或符号）可能具有独特的含义，对它们进行编码可确保浏览器和Web服务器正确解释它们。

那么，为什么需要对URL进行编码？这是因为默认情况下URL可以包含的字符受到限制。标准URL规范规定URL只能包含ASCII字符集中的字符，该字符集由128个字符组成。这些字符包括大写和小写字母、数字以及有限的特殊字符，例如“-”、“_”、“.”和“~”。

保留字符在URL中具有特定含义，不属于标准ASCII集，如果在URL中使用，则必须对其进行编码。保留字符有“/”、“[”、“]”、“@”、“%”、“:”、“&”、“#”、“@”、“=”等。

要在URL中包含保留字符，必须对它们进行百分比编码，这意味着将它们替换为百分号（“%”），后跟其十六进制值。例如，由于URL不能包含空格，因此空格字符（“ ”）被编码为“%20”或“+”，而符号（“&”）被编码为“%26”。

JavaScript提供了两个对URL进行编码的函数：encodeURI()和encodeURIComponent()。

功能encodeURIComponent()

该encodeURIComponent()函数对URI组件（例如查询参数）进行编码，其中某些字符具有特殊含义，必须进行编码。它对除标准ASCII字母数字字符（AZ、az和0-9）、连字符（“-”）、下划线（“_”）、句点（“.”）和波形符（“~”）之外的所有字符进行编码。

看看下面的代码片段及其结果：

const url = "https://baidu.com";
const encodedURL = encodeURIComponent(url);
console.log(encodedURL);
// Output: https%3A%2F%2Fbaidu.com

在第一个示例中，我们定义了一个变量“url”并为其分配了一个值。我们调用该encodedURIComponent()函数，并将“url”作为参数传递。然后，该函数通过用百分比编码表示替换特定字符来对URL进行编码，并将其记录到终端。

“:”和“/”等字符已替换为其百分比编码表示形式（分别为%3A和%2F）。

const url2 = "mango &amp; pineapple";
const encodedURL2 = encodeURIComponent(url2);
console.log(encodedURL2);
// Output: mango%20%26%20pineapple

在示例2中，能看到代表空格和与号（&）字符的“%20”和“%26”符号吗？传递的值不是URL，但它是JavaScript如何对空格和与号进行编码的一个很好的示例。

有关该encodeURIComponent()函数的更多信息，请参阅MDN文档。

功能encodeURI()

该encodeURI函数用于对整个URI进行编码，包括整个URL。它不会对URI中允许的某些字符进行编码，例如字母、数字、连字符、句点和下划线。

未编码的字符与encodeURI该函数的字符相同encodeURIComponent，再加上几个，即：

问号（“？”）
井号（“#”）
美元符号（“$”）
与号（“&”）
逗号（“，”）
正斜杠（“/”）
冒号（“：”）
分号（“;”）
符号（“@”）
等号（“=”）
加号（“+”）

让我们看一些代码片段。

const url = 'https://www.baidu.com';
console.log(encodeURI(url)); 
// Output: https://www.baidu.com

结果与给定的URL相同，因为该encodeURI()函数不对某些字符（例如斜杠、句点和冒号）进行编码。

如果encodeURIComponent()在同一示例中使用，将观察到某些字符已被编码。让我们尝试一下。

const url = 'https://www.baidu.com';
console.log(encodeURIComponent(url)); 
// Output: https%3A%2F%2Fwww.baidu.com

现在，对于更复杂的代码示例，要编码的URL的值是查询参数。

const url = "https://juejin.cn/search?q=hello world";

console.log(encodeURI(url));
// Output: "https://juejin.cn/search?q=hello%20world"

console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world

该encodeURI()函数只是将查询输入中的空格字符编码为“%20”。另一方面，对encodeURIComponent()查询参数中的冒号、斜杠和空格字符进行编码。

有关该encodeURI()函数的更多信息，请参阅MDN文档。

理解这两个函数之间差异的关键是注意这两个函数对哪些字符进行了编码，哪些字符没有进行编码。虽然它们略有不同，但它们都执行相同的操作——对URL进行编码，使其更容易在互联网上传输。

需要对URL进行编码的原因

安全性和准确性：URL可能包含特殊字符，例如空格或查询参数，网络服务器或浏览器可能会误解这些字符。对URL进行编码可确保正确解释特殊字符，从而减少错误并确保准确传输。
数据完整性：在URL中发送数据（例如搜索查询或表单提交）时，编码可确保数据在传输过程中得到保留。解码允许接收器正确处理和解释数据。

在JavaScript中解码URL

解码与编码相反。它恢复编码URL的效果。

解码URL需要将百分比编码字符转换回其原始形式。当收到编码的URL并需要从中提取信息时，解码就很重要，这类似于解决一个难题，必须解码才能接收消息。

功能decodeURIComponent()

在JavaScript中，可以使用该函数解码URLdecodeURIComponent()。当调用此函数来解码URL时，它会解码URI的每个组成部分。

const encodedURL = "https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world";
console.log(decodeURIComponent(encodedURL));
// Output: "https://juejin.cn/search?q=hello world"&quot;"

此处，该decodeURIComponent()函数将编码后的URL作为输入并返回解码后的URL。

此MDN文档提供了有关此功能的更多信息。

功能decodeURI()

该decodeURI()函数用于解码整个URI，包括域、路径和查询参数。

const url = "https://sample.com/search?q=hello world";
console.log(encodeURI(url));
// Output: https://sample.com/search?q=hello%20world

console.log(decodeURI(url));
// Output: https://sample.com/search?q=hello world

在上面的示例中，我们使用该函数对URL查询参数进行编码encodeURI()，并使用该decodeURI()函数对编码后的URL进行解码。

查看MDN文档以获取有关该decodeURI()方法的更多信息。

学习如何在JavaScript中对URL进行编码和解码是一回事；了解何时对URL进行编码和解码是另一回事。

何时对URL进行编码

以下是可能需要对URL进行编码的一些常见场景：

生成动态URL：如果应用程序动态生成URL（例如根据用户输入或数据库值生成链接），请确保任何用户生成的输入都经过正确编码。这可确保URL中的任何特殊字符都转换为可以通过Internet安全传输的格式。

const dynamicValue = "hello world";
const encodedURL = "https://juejin.cn/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://juejin.cn/search?q=hello%20world"

使用URL参数处理表单提交：当用户提交表单数据（例如用户配置文件）时，表单数据通常作为查询参数包含在URL中。如果它包含特殊字符（例如&、?或空格），则应在通过GET或POST请求发送URL参数之前对其进行编码。这可以防止由于URL中的无效字符导致的意外行为或错误，并确保数据安全传输。

<form action="https://juejin.cn/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>

单击提交按钮时，表单会将数据提交到“https://https://juejin.cn//search”。
表单数据使用GET方法进行编码并发送到服务器，因为它是指定action属性时表单提交的默认方法。
第一个输入字段包含值“hello world”。提交表单后，该值将被编码并作为查询参数附加到URL。例如，编码后的URL可能类似于“https://https://juejin.cn//search?q=hello%20world”。

通过Ajax请求发送数据：发送Ajax请求以从服务器检索数据时，通常会在URL中包含参数。这些参数可能包含特殊字符，因此有必要对URL进行编码，以确保Ajax请求正常工作并避免特殊字符引起的意外问题。

const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://juejin.cn//api/search?q=" + encodedInputWord; JAVASCRIPT

何时解码URL

以下是可能需要解码URL的一些常见场景：

处理从外部源接收的URL：外部源（例如API响应、用户输入）可以提供编码的URL。解码这些URL可以让提取原始信息并确保数据得到正确解释。

const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
const decodedURL = decodeURIComponent(encodedURL);
console.log(decodedURL); // Output: "https://baidu.com/search?q=hello world"

在用户界面中显示URL：在应用程序的用户界面中显示URL时，请确保它们采用原始的、人类可读的格式。对URL进行解码可确保它们正确地显示给用户。

 const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
 const decodedURL = decodeURIComponent(encodedURL);
 document.getElementById("url").textContent = decodedURL; // Output on the browser UI: "https://baidu.com/search?q=hello world"

URL编码和解码工具

除了大多数编程语言中用于编码和解码URL的内置函数之外，还有在线工具可用于执行基本的编码和解码操作。此类工具的示例包括urlencode.org、urldecoder.org和gochyu url encode。

这些工具使用起来很简单：输入想要编码或解码的URL，即可获得结果。

结论

总之，理解URL编码和解码的概念对于任何Web开发人员来说都是至关重要的。这些流程可确保通过互联网传输数据时的数据完整性、安全性和准确性。了解何时以及如何对URL进行编码或解码可以帮助开发人员开发安全可靠的Web应用程序，从而有效地处理与URL相关的任务。

以上就是一文详解JavaScript中的URL编码和解码的详细内容，更多关于JavaScript URL编码和解码的资料请关注本站其它相关文章！

一文详解JavaScript中的URL编码和解码