js对url进行编码解码的多种方式对比总结

// 原始URL（包含中文和空格）
const originalUrl = "https://example.com/搜索?keyword=JS 教程&page=1";

// 编码整个URL
const encodedUrl = encodeURI(originalUrl);
console.log(encodedUrl);
// 输出：https://example.com/%E6%90%9C%E7%B4%A2?keyword=JS%20%E6%95%99%E7%A8%8B&page=1
// 可见：中文“搜索”→%E6%90%9C%E7%B4%A2，空格→%20，而?、&、=保留不变

// 解码（还原原始URL）
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);
// 输出：https://example.com/搜索?keyword=JS 教程&page=1（完全还原）

// 原始参数（包含中文、&、空格）
const keyword = "JS&CSS 教程";
const page = 1;

// 编码单个参数（关键步骤）
const encodedKeyword = encodeURIComponent(keyword);
const encodedPage = encodeURIComponent(page);

// 拼接URL（参数已编码，不会破坏结构）
const url = `https://example.com/search?keyword=${encodedKeyword}&page=${encodedPage}`;
console.log(url);
// 输出：https://example.com/search?keyword=JS%26CSS%20%E6%95%99%E7%A8%8B&page=1
// 可见：&→%26，空格→%20，中文→%E6%95%99%E7%A8%8B，参数分割符&保留正常作用

// 解码参数（还原原始值）
const decodedKeyword = decodeURIComponent(encodedKeyword);
console.log(decodedKeyword); // 输出：JS&CSS 教程（完全还原）

const encodedByComponent = encodeURIComponent("a&b=1"); // 编码后：a%26b%3D1

// 错误：用decodeURI解码encodeURIComponent的结果
try {
  decodeURI(encodedByComponent); 
} catch (e) {
  console.log(e); // 不会报错，但解码不完整：a&b=1（看似正常，实际特殊场景会出问题）
}

// 正确：用decodeURIComponent解码
const decoded = decodeURIComponent(encodedByComponent);
console.log(decoded); // 输出：a&b=1（完全还原）

// 废弃用法（不推荐）
const wrongEncoded = escape("测试");
console.log(wrongEncoded); // 输出：%u6D4B%u8BD5（非标准格式，后端可能无法解析）

// 表单数据（含中文、&、空格）
const formData = {
  username: "张三&李四",
  hobby: "编程 旅游",
  age: 25
};

// 构建查询参数（关键：用encodeURIComponent编码每个值）
const params = Object.entries(formData)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join("&");

// 拼接完整URL（用encodeURI编码整个URL，可选，因参数已编码）
const requestUrl = encodeURI(`https://example.com/api/submit?${params}`);
console.log(requestUrl);
// 输出：https://example.com/api/submit?username=%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B&hobby=%E7%BC%96%E7%A8%8B%20%E6%97%85%E6%B8%B8&age=25

// 假设从地址栏获取的URL
const url = "https://example.com/search?keyword=JS%26CSS%20%E6%95%99%E7%A8%8B&page=1";

// 提取查询参数部分
const queryString = url.split("?")[1];

// 解析参数（解码每个值）
const params = {};
queryString.split("&").forEach(item => {
  const [key, value] = item.split("=");
  params[decodeURIComponent(key)] = decodeURIComponent(value);
});

console.log(params);
// 输出：{ keyword: 'JS&CSS 教程', page: '1' }（完全还原原始参数）

const anchor = "用户中心?tab=订单";

// 编码锚点（用encodeURIComponent，避免#后包含?&导致解析错误）
const encodedAnchor = encodeURIComponent(anchor);
const url = `https://example.com/#${encodedAnchor}`;
console.log(url); // 输出：https://example.com/#%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83%3Ftab%3D%E8%AE%A2%E5%8D%95

// 解码锚点
const decodedAnchor = decodeURIComponent(url.split("#")[1]);
console.log(decodedAnchor); // 输出：用户中心?tab=订单

const value = "80%";
const encoded = encodeURIComponent(value);
console.log(encoded); // 输出：80%25（正确编码%）
const decoded = decodeURIComponent(encoded);
console.log(decoded); // 输出：80%（正确还原）

const phone = "13800138000+86";
const encoded = encodeURIComponent(phone);
console.log(encoded); // 输出：13800138000%2B86（+→%2B）
const decoded = decodeURIComponent(encoded);
console.log(decoded); // 输出：13800138000+86（正确还原）