互轉
本地執行 · 零上傳

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

核心能力

01

Query → JSON

解析 URL 查詢串為巢狀 JSON 物件,自動 URL 解碼。

02

JSON → Query

從 JSON 物件生成標準 URL 編碼的查詢字串。

03

重複鍵處理

同名參數轉為陣列,符合常見服務端解析語義。

04

編碼/解碼

自動處理 %XX 形式的中文與特殊字元。

05

即時輸出

貼上完整 URL 或純 query 部分均可解析。

06

本地處理

URL 中可能含 token 等敏感參數,本地解析更安全。

07

完整 URL 解析

貼上帶域名的完整 URL 自動提取 ? 後 query 部分。

08

巢狀物件

支援 bracket/dot notation 與 JSON 物件的雙向對映。

HOW TO USE

使用步驟

  1. 1

    貼上 URL 查詢串或 JSON 物件

  2. 2

    選擇解析或生成方向

  3. 3

    複製結果

  4. 4

    轉換失敗時檢視錯誤提示,修正原始檔語法後重試

  5. 5

    結果可用格式化工具美化,或匯出供下游指令碼使用

WORKFLOW

典型工作流

從匯入資料到匯出結果的完整流程,幫助團隊統一 Query 參數 ⇄ JSON 的使用方式。

1

輸入 query 或 URL

從瀏覽器位址列、Network 面板或日誌複製。

2

檢視 JSON

確認巢狀與陣列結構符合服務端解析邏輯。

3

編輯 JSON

修改參數值後反向生成 query 字串。

4

發起測試

拼接到 base URL 在瀏覽器或 Postman 中驗證。

USE CASES

適用場景

前端

前端開發

解析 Vue Router / Next.js 的 query 參數為 JSON 除錯。

後端

後端開發

構造 GET 介面測試 URL,JSON 定義參數後一鍵生成 query。

測試

測試工程師

批次構造帶多參數的測試 URL。

SE

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 堅持純前端架構,以下對比說明為何本地化工具更適合處理開發資料。

對比項
JSONSort 本地
傳統線上工具
資料隱私
完全本地,零上傳
多數需上傳至伺服器
響應速度
毫秒級,無網路延遲
受網路與伺服器負載影響
離線使用
支援 PWA 離線
通常需要聯網
敏感資料
JWT/配置/日誌可放心處理
存在洩露風險
廣告與追蹤
無廣告、無資料追蹤
多數含廣告或 Analytics
檔案拖拽
支援本地檔案直接匯入
部分工具限制上傳大小
工具聯動
19 種工具同一頁面切換
通常每種工具獨立網站
開源透明
純靜態頁,可審查原始碼
閉源服務端不可審計

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 級別的資料。超大檔案建議先拆分或使用合併清理工具。

已複製到剪貼簿