🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

問題描述

在JavaScript開發過程中，開發者經常會遇到 URIError: URI malformed 的錯誤提示。該錯誤通常表示在代碼中嘗試創建或操作一個不符合URI規范的字符串，導致解析失敗。

原因分析

1. 特殊字符未正確編碼：URL中包含了不允許的特殊字符（如空格、#、&等），但未進行適當的編碼。例如，當URL中包含字符 % 時，瀏覽器在解碼時會報錯，因為 % 是一個特殊字符，代表十六進制表示的字符。

2. 使用不正確的編碼函數：使用了不適當的編碼函數。例如，escape 函數在某些情況下會錯誤地編碼字符，導致后續解碼失敗。相比之下，encodeURIComponent 是更安全的編碼函數，推薦在處理URL參數時使用。

3. 字符串格式錯誤：URL字符串格式不正確，例如缺少協議頭（如 http:// 或 https://），或者路徑部分包含非法字符。

4. 拼接錯誤：在拼接URL時，未正確拼接各個部分，導致生成的字符串不符合URI規范。

解決方案

1. 使用 encodeURIComponent 進行編碼

在處理URL參數時，使用 encodeURIComponent 函數對特殊字符進行編碼。例如：

let param = "中文";
let encodedParam = encodeURIComponent(param);
let url = `https://example.com/?search=${encodedParam}`;

2. 確保URL格式正確

在創建URL時，確保其符合標準格式，包括協議頭、路徑部分等。例如：

let url = new URL('https://example.com/search');
url.searchParams.append('q', '中文');

3. 檢查字符串拼接

在拼接URL時，確保每個部分都正確拼接，避免生成無效的URI字符串。例如：

let baseURL = 'https://example.com/search?q=';
let searchParam = '中文';
let fullURL = baseURL + encodeURIComponent(searchParam);

4. 使用 decodeURIComponent 進行解碼

在接收URL參數時，使用 decodeURIComponent 函數進行解碼。例如：

let decodedParam = decodeURIComponent(fullURL.split('?')[1]);

實戰案例

假設有一個搜索功能的實現，需要將用戶輸入的關鍵詞拼接到URL中：

function search(keyword) {let baseURL = 'https://example.com/search?q=';let encodedKeyword = encodeURIComponent(keyword);let url = baseURL + encodedKeyword;window.location.href = url;
}search('中文'); // 正確拼接并編碼URL

總結

URIError: URI malformed 錯誤通常是由于URL中包含特殊字符但未正確編碼、使用不正確的編碼函數、字符串格式錯誤或拼接錯誤等原因引起的。通過以下方法可以有效避免該問題：

1. 使用 encodeURIComponent 進行編碼：在處理URL參數時，使用 encodeURIComponent 對特殊字符進行編碼。
2. 確保URL格式正確：在創建URL時，確保其符合標準格式，包括協議頭、路徑部分等。
3. 檢查字符串拼接：在拼接URL時，確保每個部分都正確拼接，避免生成無效的URI字符串。
4. 使用 decodeURIComponent 進行解碼：在接收URL參數時，使用 decodeURIComponent 進行解碼。

通過這些方法，開發者可以提高代碼的健壯性，減少運行時錯誤，提升應用的穩定性和用戶體驗。建議開發者定期檢查和測試代碼，確保所有引用都正確無誤。