js链接跳转，地址栏转义

在JavaScript中，你可以使用encodeURIComponent和decodeURIComponent函数来处理URL的转义和解码。这些函数可以帮助你确保URL中的参数被正确编码和解码，从而避免特殊字符导致的问题。

1. 链接跳转

假设你有一个需要跳转的URL，并且这个URL包含一些查询参数，你可以使用以下代码来进行跳转：

// 原始URL
let url = "https://example.com/search?query=你好&sort=asc";

// 对URL进行编码
let encodedUrl = encodeURIComponent(url);

// 跳转到编码后的URL
window.location.href = encodedUrl;

2. 地址栏转义

如果你需要在地址栏中显示一个经过转义的URL，可以使用encodeURIComponent函数：

let query = "你好";
let sort = "asc";

// 对查询参数进行编码
let encodedQuery = encodeURIComponent(query);
let encodedSort = encodeURIComponent(sort);

// 构建完整的URL
let url = `https://example.com/search?query=${encodedQuery}&sort=${encodedSort}`;

console.log(url); // 输出: https://example.com/search?query=%E4%BD%A0%E5%A5%BD&sort=asc

3. 从地址栏获取并解码

当你从地址栏获取URL时，可以使用decodeURIComponent函数来解码：

// 假设这是从地址栏获取的URL
let encodedUrl = "https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fexample.com%2Fsearch%3Fquery%3D%E4%BD%A0%E5%A5%BD%26sort%3Dasc";

// 对URL进行解码
let decodedUrl = decodeURIComponent(encodedUrl);

console.log(decodedUrl); // 输出: https://example.com/search?query=你好&sort=asc

综合示例

以下是一个完整的示例，展示如何将查询参数编码、构建URL、跳转以及从地址栏获取并解码：

// 原始查询参数
let query = "你好";
let sort = "asc";

// 对查询参数进行编码
let encodedQuery = encodeURIComponent(query);
let encodedSort = encodeURIComponent(sort);

// 构建完整的URL
let url = `https://example.com/search?query=${encodedQuery}&sort=${encodedSort}`;

// 跳转到编码后的URL
window.location.href = url;

// 假设这是从地址栏获取的URL
let encodedUrlFromAddressBar = window.location.href;

// 对URL进行解码
let decodedUrl = decodeURIComponent(encodedUrlFromAddressBar);

console.log(decodedUrl); // 输出: https://example.com/search?query=你好&sort=asc

通过这种方式，你可以确保URL中的参数被正确编码和解码，从而避免由于特殊字符导致的问题。