数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 TypeScript 中编码和解码 URL？
URI 代表统一资源标识符。URL 是最常见的 URI 之一。我们使用 URL（统一资源定位符）来查找位于互联网上的网页。网页还包含资源。
简单来说，URI 是包含某些字符的字符串，我们可以使用 URI 识别网络上的物理和逻辑资源。URL 是 URI 的一个子集，它存储网络上的文档地址。
编码 URI 的原因
阅读本教程标题后，您脑海中出现的第一个问题可能是为什么我们需要对 URI 进行编码和解码。答案很简单：URL 只能包含 128 个 ASCII 字符集中的字符。因此，我们需要对某些不属于 128 个 ASCII 字符集的字符进行编码。
因此，我们必须使用转义序列来转义诸如“！”和“空格”之类的特殊字符，我们可以通过对 URI 进行编码来实现。如果我们不转义此类特殊字符，可能会导致问题。
在 TypeScript 中编码 URI
在 TypeScript 中编码 URI 有两种方法可用。encodeURI() 和 encodeURIComponent()。这两种方法都是内置库方法，它们将一些特殊字符（例如空格）编码为一个、两个、三个或四个转义序列。这里，转义序列表示字符的 UTF-8 编码。
encodeURI() 和 encodeURIComponent() 方法之间的主要区别在于，encodeURI() 编码整个 URL 或 URI，而 encodeURIComponent() 编码 URL 的一部分，这可能是 URL 的查询参数。
语法
用户可以按照以下语法使用 encodeURI() 和 encodeURIComponent() 方法对 URI 进行编码。
let encoded = encodeURI(URI); let encodedComponent = encodeURIComponent(URI);
这里URI是要通过转义一些特殊字符进行编码的 URI。
示例 1
在输出中，我们看到空格被转义为 %20，“<”被转义为 %3C，“>”被转义为 %3E。
// URL which contains the spaces, <, > as a special characters const demoURL = 'https ://tutorialspoint.com/artic les/i ndex.php<>'; // encode the URI to escape the special characters. const encodedURL = encodeURI(demoURL); // Printing the encoded URL console.log(encodedURL);
编译后，它将生成以下 JavaScript 代码：
// URL which contains the spaces, <, > as a special characters var demoURL = 'https ://tutorialspoint.com/artic les/i ndex.php<>'; // encode the URI to escape the special characters. var encodedURL = encodeURI(demoURL); // Printing the encoded URL console.log(encodedURL);
输出
以上代码将产生以下输出：
https%20://tutorialspoint.com/artic%20les/i%20ndex.php%3C%3E
示例 2
此示例演示了如何使用 encodeURIComponent() 方法对 URL 的一部分进行编码。我们获取了包含特殊字符的 URL 字符串。之后，我们使用 encodeURIComponent() 方法对 URL 的“index.php<>”部分进行编码。此外，我们还使用 encodeURIComponent() 对 URL 的“www.Tutorialspoint.com”部分进行了编码。
输出显示，它不是对整个 URL 进行编码，而是对 URL 的特定部分进行编码。
// encoding the part of the URL using the encodeURIComponent() method
const encodedURLComponent = `https://tutorialspoint.com/articles/${encodeURIComponent(
"index.php<>"
)}`;
// Printing the URL with the encoded component.
console.log(encodedURLComponent);
// Encoding the another component of the same URL
console.log(
`https://${encodeURIComponent(
"www. tutorialspoint.com"
)}/articles/index.php<>`
);
编译后，它将生成以下 JavaScript 代码：
// encoding the part of the URL using the encodeURIComponent() method
var encodedURLComponent = "https://tutorialspoint.com/articles/" + encodeURIComponent("index.php<>");
// Printing the URL with the encoded component.
console.log(encodedURLComponent);
// Encoding the another component of the same URL
console.log("https://" + encodeURIComponent("www. tutorialspoint.com") + "/articles/index.php<>");
输出
以上代码将产生以下输出：
https://tutorialspoint.com/articles/index.php%3C%3E https://www.%20tutorialspoint.com/articles/index.php<>
在 TypeScript 中解码 URI
显然，我们需要解码编码的 URI。解码器用特殊字符替换字符的转义序列，并从编码的 URI 生成原始 URI。我们可以使用 decodeURI() 方法解码 URI，或使用 decodeURIComponent() 方法解码 URI 的一部分。
语法
用户可以按照以下语法使用 decodeURI() 和 decodeURIComponent() 方法解码编码的 URL 或其组件。
let orginalURL = decodeURI(encoded_URI); let orginalURLComponent = decodeURI(encoded_URI);
这里encoded_URI是要解码的编码的 URI 或 URL。
示例 1
在此示例中，我们首先使用 encodeURI() 方法对 URI 进行编码，然后使用 decodeURI() 方法对 URI 进行解码。
输出显示与原始 URI 相同的 URI，因为我们在编码 URI 后对其进行了解码。
// defining the original URI
let originalURI = "https://www.google. com/";
// encoding the URI
let encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);
// decoding the URI
let decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
编译后，它将生成以下 JavaScript 代码：
// defining the original URI
var originalURI = "https://www.google. com/";
// encoding the URI
var encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);
// decoding the URI
var decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
输出
以上代码将产生以下输出：
The encoded URI is https://www.google.%20com/ The decoded URI is https://www.google. com/
示例 2
以下示例演示了 decodeURIComponent() 方法的使用。我们获取了 google 域的 URL，并使用 encodeURIComponent() 方法对 URL 中包含空格和其他特殊字符的部分进行编码。
在输出中，用户可以看到编码的 URL。我们从输出中复制了编码的 URL，并使用 decodeURIComponent() 方法仅解码编码的部分，而不是解码整个 URL。解码编码部分后，它看起来类似于原始 URL。
// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);
编译后，它将生成以下 JavaScript 代码：
// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);
输出
以上代码将产生以下输出：
The encoded URI component is https://www.google.%20com%2F%3A%3E= The decoded URI Component is https://www.google.20com/:>=
在现实生活中的开发中，URI 的编码和解码有一些用例。例如，我们希望使用表单从用户那里获取字符串，并使用该数据创建 URL。用户可以输入空格和 128 个 ASCII 字符集之外的字符，然后我们需要对其进行编码。
有时，我们需要仅对 URL 的查询参数进行编码。在这种情况下，我们可以使用 encodeURIComponent() 方法。对 URI 进行编码后，当我们想要显示 URI 或 URL 时，必须对其进行解码。
15K+ 浏览量
