typescript 对URl进行编码和解码

URI是统一资源标识符的意思。URL是最常见的URIS之一。我们使用URL（统一资源定位器）来寻找位于互联网上的网页。网页也包含资源。

简单地说，URI是一个包含一些字符的字符串，我们可以用URI来识别网络上的物理和逻辑资源。URL是URI的一个子集，它存储了网络上的文件地址。

对URI进行编码的原因

看完本教程的标题后，你脑海中出现的第一个问题是，为什么我们需要对URI进行编码和解码。答案很简单。URL应该只包含128个ASCII字符集中的字符。因此，我们需要对一些不属于128个ASCII字符集的字符进行编码。

因此，我们必须通过使用转义序列来转义特殊字符，如’！’和’空格’，我们可以通过对URIS进行编码来做到这一点。如果我们不转义这种特殊字符，可能会引起问题。

在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转义的，'<’ is escaped by %3C, and ‘>’是由%3E转义的。

// URL which contains the spaces, <, > as a special characters
const demoURL = 'https ://www.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);

// URL which contains the spaces, <, > as a special characters
var demoURL = 'https ://www.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://www.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://www.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<>`
);

// encoding the part of the URL using the encodeURIComponent() method
var encodedURLComponent = "https://www.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://www.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进行编码后进行了解码。

// 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);

// 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);

// 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时，我们必须对它进行解码。