如何在 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 进行编码。
letcoded = encodeURI(URI); letcodedComponent = encodeURIComponent(URI);
此处 URI 是需要通过转义一些特殊字符进行编码的 URI。
示例 1
在输出中，我们看到空格被 %20 转义，"<"被 %3C 转义，">"被 %3E 转义。
// 包含空格、<、> 作为特殊字符的 URL const demoURL = 'https ://www.tutorialspoint.com/artic les/in ndex.php<>'; // 对 URI 进行编码以转义特殊字符。 constcodedURL = encodeURI(demoURL); // 打印编码后的 URL console.log(encodedURL);
编译后，它将生成以下 JavaScript 代码 -
// 包含空格、<、> 作为特殊字符的 URL var demoURL = 'https ://www.tutorialspoint.com/artic les/i ndex.php<>'; // 对 URI 进行编码以转义特殊字符。 varcodedURL = encodeURI(demoURL); // 打印编码后的 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 的特定部分进行编码。
// 使用 encodeURIComponent() 方法对 URL 的部分进行编码
constcodedURLComponent = `https://www.tutorialspoint.com/articles/${encodeURIComponent(
"index.php<>"
)}`;
// 使用编码组件打印 URL。
console.log(encodedURLComponent);
// 对同一 URL 的另一个组件进行编码
console.log(
`https://${encodeURIComponent(
"www. tutorialspoint.com"
)}/articles/index.php<>`
);
编译后，它将生成以下 JavaScript 代码 -
// 使用 encodeURIComponent() 方法对 URL 的一部分进行编码
varcodedURLComponent = "https://www.tutorialspoint.com/articles/" + encodeURIComponent("index.php<>");
// 使用编码后的组件打印 URL。
console.log(encodedURLComponent);
// 对同一 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。我们可以使用 decryptURI() 方法解码 URI，或使用 decryptURIComponent() 方法解码 URI 的一部分。
语法
用户可以按照以下语法使用 decryptURI() 和 decryptURIComponent() 方法解码编码后的 URL 或其组件。
let orginalURL = decodeURI(encoded_URI); let orginalURLComponent = decodeURI(encoded_URI);
此处 encoded_URI 是需要解码的编码 URI 或 URL。
示例 1
在此示例中，我们首先使用 encodeURI() 方法对 URI 进行编码，然后使用 decryptURI() 方法对 URI 进行解码。
输出显示与原始 URI 相同的 URI，因为我们对 URI 进行编码后进行了解码。
// 定义原始 URI
let originalURI = "https://www.google. com/";
// 编码 URI
letcodedURI = encodeURI(originalURI);
console.log("编码的 URI 是 " +codedURI);
// 解码 URI
let decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
编译后，它将生成以下 JavaScript 代码 -
// 定义原始 URI
var originalURI = "https://www.google. com/";
// 编码 URI
varcodedURI = encodeURI(originalURI);
console.log("编码后的 URI 为 " +codedURI);
// 解码 URI
varcodedURI =codedURI(encodedURI);
console.log("解码后的 URI 为 " +codedURI);
输出
上述代码将产生以下输出 −
编码后的 URI 为 https://www.google.%20com/ 解码后的 URI 为 https://www.google. com/
示例 2
以下示例演示了如何使用decodeURIComponent()方法。我们获取了 google 域的 URL，并使用 encodeURIComponent() 方法对 URL 中包含空格和其他特殊字符的某些部分进行编码。
在输出中，用户可以看到已编码的 URL。我们从输出中复制了已编码的 URL，并使用了 decryptURIComponent() 方法对唯一已编码的部分进行解码，而不是对整个 URL 进行解码。解码已编码部分后，它看起来与原始 URL 类似。
// 编码 URI 组件
letcodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("编码后的 URI 组件为 " +codedURIComponent);
// 解码 URI 组件
letcodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("解码后的 URI 组件为 " +codedURIComponent);
编译后，系统会生成以下 JavaScript 代码 -
// 编码 URI 组件
letcodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("编码后的 URI 组件为 " +codedURIComponent);
// 解码 URI 组件
letcodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("解码后的 URI 组件是 " +codedURIComponent);
输出
上述代码将产生以下输出 −
编码后的 URI 组件是 https://www.google.%20com%2F%3A%3E= 解码后的 URI 组件是 https://www.google.20com/:>=
在实际开发中，有一些对 URI 进行编码和解码的用例。例如，我们想从使用表单的用户那里获取一个字符串，并使用该数据创建一个 URL。用户可以输入空格和 128 个 ASCII 字符集之外的字符，这时我们需要对它们进行编码。
有时，我们只需要对 URL 的查询参数进行编码。在这种情况下，我们可以使用 encodeURIComponent() 方法。一旦我们对 URI 进行编码，当我们想要显示 URI 或 URL 时，就必须对其进行解码。
