// 原始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（完全還原）

// 原始參數(shù)（包含中文、&、空格）
const keyword = "JS&CSS 教程";
const page = 1;
// 編碼單個參數(shù)（關(guān)鍵步驟）
const encodedKeyword = encodeURIComponent(keyword);
const encodedPage = encodeURIComponent(page);
// 拼接URL（參數(shù)已編碼，不會破壞結(jié)構(gòu)）
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，參數(shù)分割符&保留正常作用
// 解碼參數(shù)（還原原始值）
const decodedKeyword = decodeURIComponent(encodedKeyword);
console.log(decodedKeyword); // 輸出：JS&CSS 教程（完全還原）

const encodedByComponent = encodeURIComponent("a&b=1"); // 編碼后：a%26b%3D1
// 錯誤：用decodeURI解碼encodeURIComponent的結(jié)果
try {
  decodeURI(encodedByComponent); 
} catch (e) {
  console.log(e); // 不會報(bào)錯，但解碼不完整：a&b=1（看似正常，實(shí)際特殊場景會出問題）
}
// 正確：用decodeURIComponent解碼
const decoded = decodeURIComponent(encodedByComponent);
console.log(decoded); // 輸出：a&b=1（完全還原）

// 廢棄用法（不推薦）
const wrongEncoded = escape("測試");
console.log(wrongEncoded); // 輸出：%u6D4B%u8BD5（非標(biāo)準(zhǔn)格式，后端可能無法解析）

// 表單數(shù)據(jù)（含中文、&、空格）
const formData = {
  username: "張三&李四",
  hobby: "編程 旅游",
  age: 25
};
// 構(gòu)建查詢參數(shù)（關(guān)鍵：用encodeURIComponent編碼每個值）
const params = Object.entries(formData)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join("&");
// 拼接完整URL（用encodeURI編碼整個URL，可選，因參數(shù)已編碼）
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

// 假設(shè)從地址欄獲取的URL
const url = "https://example.com/search?keyword=JS%26CSS%20%E6%95%99%E7%A8%8B&page=1";
// 提取查詢參數(shù)部分
const queryString = url.split("?")[1];
// 解析參數(shù)（解碼每個值）
const params = {};
queryString.split("&").forEach(item => {
  const [key, value] = item.split("=");
  params[decodeURIComponent(key)] = decodeURIComponent(value);
});
console.log(params);
// 輸出：{ keyword: 'JS&CSS 教程', page: '1' }（完全還原原始參數(shù)）

const anchor = "用戶中心?tab=訂單";
// 編碼錨點(diǎn)（用encodeURIComponent，避免#后包含?&導(dǎo)致解析錯誤）
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
// 解碼錨點(diǎn)
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（正確還原）