URL，是拜访互联网资源的地址。每个 URL 都指向网络上的仅有资源。 URL 有时或许包括特别字符或需求动态操作。

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

当在浏览器中输入内容时，会供给一个或多个搜索成果。这些搜索成果的格局令人困惑，包括文本和特别字符，例如 %、+、?、=、&、<、> 等。

在 JavaScript 中运用 URL

在开端对 URL 进行编码和解码之前，咱们需求学习如安在 JavaScript 中运用 URL。当需求构建、解析和操作网址时，这非常有用。现代 JavaScript 供给了一个内置URL类，它供给了处理 URL 的强大功用：

  1. 创立 URL 目标： 要在 JavaScript 中运用 URL，能够运用此 URL 语法创立 URL 目标。
const url = new URL("https://www.6hu.cc/editor?q=hello world");

  1. 拜访 URL 组件： 一旦拥有 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
  1. 将 URL 目标或组件转换为字符串： 能够运用toString()JavaScript 办法获取 URL，或许在本例中获取字符串方式的 URL 组件。
console.log(url.searchParams.toString());
// Output: q=hello+world
  1. 获取当时页面 URL：要获取当时所在网页的当时 URL，请运用该window.location.href特点。
const currentUrl = window.location.href;
console.log(currentUrl);
  1. 修正 URL 组件： searchParams能够运用URL 目标的特点轻松修正 URL 的查询参数。
url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

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

  1. 结构新的 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://www.6hu.cc/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://www.6hu.cc/search?q=hello world";
console.log(encodeURI(url));
// Output: "https://www.6hu.cc/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 进行编码的原因

  1. 安全性和准确性： URL 或许包括特别字符，例如空格或查询参数，网络服务器或浏览器或许会误解这些字符。对 URL 进行编码可保证正确解说特别字符，然后减少错误并保证准确传输。
  2. 数据完整性： 在 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://www.6hu.cc/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 进行编码和解码是一回事；学习如安在 JavaScript 中对 URL 进行编码和解码是一回事。了解何时对 URL 进行编码和解码是另一回事。

何时对 URL 进行编码

以下是或许需求对 URL 进行编码的一些常见场景：

  1. 生成动态 URL： 假如应用程序动态生成 URL（例如根据用户输入或数据库值生成链接），请保证任何用户生成的输入都经过正确编码。这可保证 URL 中的任何特别字符都转换为能够经过 Internet 安全传输的格局。
const dynamicValue = "hello world";
const encodedURL = "https://www.6hu.cc/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://www.6hu.cc/search?q=hello%20world"
  1. 运用 URL 参数处理表单提交： 当用户提交表单数据（例如用户配置文件）时，表单数据一般作为查询参数包括在 URL 中。假如它包括特别字符（例如 &、? 或空格），则应在经过 GET 或 POST 恳求发送 URL 参数之前对其进行编码。这能够防止由于 URL 中的无效字符导致的意外行为或错误，并保证数据安全传输。
<form action="https://www.6hu.cc/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>
  1. 经过 Ajax 恳求发送数据： 发送 Ajax 恳求以从服务器检索数据时，一般会在 URL 中包括参数。这些参数或许包括特别字符，因此有必要对 URL 进行编码，以保证的 Ajax 恳求正常作业并防止特别字符引起的意外问题。
const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://www.6hu.cc//api/search?q=" + encodedInputWord; JAVASCRIPT

何时解码 URL

以下是或许需求解码 URL 的一些常见场景：

  1. 处理从外部源接纳的 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"
  1. 在用户界面中显现 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 编码和解码

往期抢手精彩引荐

# ES2024 Temporal API——JavaScript时刻与日期处理的革命性新篇章

# 关于浏览器调试的30个奇淫技巧

# Next.js 的路由为什么是这样的

# 2024最新程序员接活儿搞钱渠道盘点

解锁 JSON.stringify() 5 个鲜为人知的功用

解锁 JSON.stringify() 7 个鲜为人知的坑

怎么去完成浏览器多窗口互动

面试相关抢手引荐

前端万字面经——基础篇

前端万字面积——进阶篇

简述 pt、rpx、px、em、rem、%、vh、vw的区别

实战开发相关引荐

前端常用的几种加密办法

探究Web Worker在Web开发中的应用

不懂 搜索引擎优化 优化？一篇文章帮你了解怎么去做 搜索引擎优化 优化

【实战篇】微信小程序开发指南和优化实践

前端功能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址完成下载功用

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关引荐

移动端反正屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关引荐

通俗易懂的 Git 入门

git 完成主动推送

更多精彩详见：个人主页