Query 參數 ⇄ JSON
GET 參數解析 · JSON 構造 URL
Query 參數
就緒
ABOUT
關於 Query 參數 ⇄ JSON
將 ?a=1&b=2 形式的查詢字串解析為 JSON,或從 JSON 生成 URL 參數。
GET 請求的 query 是介面除錯的高頻入口:UTM 參數、分頁、過濾、OAuth callback——結構看似簡單,巢狀與重複鍵卻常讓人手工拼接出錯。
DEEP DIVE
深入瞭解 Query 參數 ⇄ JSON
URL 查詢字串(Query String)是 GET 請求傳遞參數的標準方式。手動解析 ?a=1&b=2&c=hello 既繁瑣又容易出錯,尤其遇到 URL 編碼的中文或巢狀參數時。JSONSort Query 工具雙向轉換:字串 → JSON 物件,或 JSON → 查詢串。
適合 REST API 除錯、構造測試 URL、分析前端 router query 參數、排查 encodeURIComponent 編碼問題等日常場景。
application/x-www-form-urlencoded 與 multipart 在陣列表示上存在慣例差異。JSONSort 將重複鍵解析為陣列,生成 query 時對陣列使用重複鍵形式——與多數 Java Spring / Node Express 預設行為一致。
FEATURES
核心能力
Query → JSON
解析 URL 查詢串為巢狀 JSON 物件,自動 URL 解碼。
JSON → Query
從 JSON 物件生成標準 URL 編碼的查詢字串。
重複鍵處理
同名參數轉為陣列,符合常見服務端解析語義。
編碼/解碼
自動處理 %XX 形式的中文與特殊字元。
即時輸出
貼上完整 URL 或純 query 部分均可解析。
本地處理
URL 中可能含 token 等敏感參數,本地解析更安全。
完整 URL 解析
貼上帶域名的完整 URL 自動提取 ? 後 query 部分。
巢狀物件
支援 bracket/dot notation 與 JSON 物件的雙向對映。
HOW TO USE
使用步驟
-
1
貼上 URL 查詢串或 JSON 物件
-
2
選擇解析或生成方向
-
3
複製結果
-
4
轉換失敗時檢視錯誤提示,修正原始檔語法後重試
-
5
結果可用格式化工具美化,或匯出供下游指令碼使用
WORKFLOW
典型工作流
從匯入資料到匯出結果的完整流程,幫助團隊統一 Query 參數 ⇄ JSON 的使用方式。
輸入 query 或 URL
從瀏覽器位址列、Network 面板或日誌複製。
檢視 JSON
確認巢狀與陣列結構符合服務端解析邏輯。
編輯 JSON
修改參數值後反向生成 query 字串。
發起測試
拼接到 base URL 在瀏覽器或 Postman 中驗證。
USE CASES
適用場景
前端開發
解析 Vue Router / Next.js 的 query 參數為 JSON 除錯。
後端開發
構造 GET 介面測試 URL,JSON 定義參數後一鍵生成 query。
測試工程師
批次構造帶多參數的測試 URL。
SEO / 運營
分析落地頁 UTM 參數結構,轉為 JSON 統計用。
安全測試
拆解 redirect_uri 與 state 參數分析 OAuth 流程。
資料分析
批次 UTM 參數轉 JSON 匯入 BI 工具做渠道歸因。
TIPS
使用技巧
- 貼上完整 URL 時,工具會提取 ? 後的 query 部分解析。
- JSON → Query 生成的字串可直接拼接到 base URL 後測試。
- 中文參數會自動 encodeURIComponent,無需手動編碼。
- 陣列參數在 query 中通常表現為重複鍵名,解析後還原為陣列。
- 與「編解碼」工具配合,排查雙重編碼或編碼缺失問題。
- OAuth redirect_uri 的 query 部分可用此工具快速拆解分析。
- + 在 query 中常表示空格,解碼時注意與 %20 等價。
- 生成 query 後拼接到 base URL 前檢查是否已有 ?。
- 陣列參數測試邊界:空陣列、單元素、多元素三種情況。
- 與 Postman 工具配合:從 Collection 提取 URL 再拆解 query。
LOCAL VS ONLINE
本地 vs 線上工具
JSONSort 堅持純前端架構,以下對比說明為何本地化工具更適合處理開發資料。
TROUBLESHOOTING
常見誤區與排查
實際使用中容易遇到的問題及建議處理方式,減少反覆試錯的時間。
中文亂碼
建議:確認已 URL 解碼;雙重編碼時用編解碼工具去一層。
陣列變字串
建議:檢查是否應使用重複鍵而非 JSON 陣列字串。
空值丟失
建議:key= 形式保留為空字串,與缺失 key 不同。
巢狀深度限制
建議:過深 bracket 可能不被服務端支援,與後端約定格式。
FAQ
常見問題
支援 hash 路由的參數嗎?
僅解析 ? 後的 query 部分。# 後的 hash 需手動分離。
空值參數會保留嗎?
key= 形式的空值會解析為空字串 ""。
巢狀物件怎麼轉 query?
扁平化為 key[nested]=value 或 dot notation,取決於模式。
hash 裡的參數能解析嗎?
#/page?x=1 中 hash 內 query 需手動分離,標準 ? 前 query 自動處理。
參數順序會保留嗎?
JSON 物件鍵序可能與原始 query 不同,功能等價。
資料會上傳到伺服器嗎?
不會。JSONSort 所有工具均在瀏覽器本地執行,您的輸入內容不會傳送到任何後端伺服器。
需要註冊或安裝嗎?
不需要。開啟頁面即可使用,無需賬號、無需下載客戶端,也支援 PWA 離線快取。
支援多大的檔案?
取決於瀏覽器記憶體,通常可流暢處理數 MB 級別的資料。超大檔案建議先拆分或使用合併清理工具。