whatwg-url 提供符合 WHATWG 標準的查詢字串解析功能，支持嵌套和數組參數。它提供了一個標準化的介面來處理查詢字串，確保在不同環境中的一致性。

url-parse 提供快速的 URL 解析，包括查詢字串部分。它能夠將 URL 解析為各個組件，並提供簡單的 API 來訪問查詢參數。

url 模組提供基本的查詢字串解析功能，但主要集中於整個 URL 的解析。它能夠解析 URL 的各個組件，包括查詢字串，但不提供專門的查詢字串處理功能。

query-string 提供簡單的查詢字串解析功能，支持解析嵌套和數組參數。它能夠將查詢字串轉換為易於使用的物件格式，並處理 URL 編碼。

url-search-params 提供原生的查詢字串操作介面，允許您輕鬆添加、刪除和修改查詢參數。它是瀏覽器和 Node.js 中的原生實現，提供一致的 API。

whatwg-url 提供符合 WHATWG 標準的查詢字串序列化功能，確保序列化過程遵循最新的標準。它支持嵌套和數組參數的序列化。

url-parse 提供查詢字串序列化功能，但不如 query-string 專注。它允許您訪問查詢參數並手動進行序列化。

url 模組提供基本的查詢字串序列化功能，但主要集中於整個 URL 的序列化。它能夠將 URL 的各個組件轉換為字串，包括查詢字串。

query-string 提供查詢字串序列化功能，支持將物件轉換為查詢字串，並處理嵌套和數組參數。它允許自定義序列化選項，如編碼方式和分隔符。

url-search-params 提供原生的查詢字串序列化功能，允許您從 URLSearchParams 物件生成查詢字串。它支持自動處理重複參數和嵌套結構。

whatwg-url 提供對整個 URL 組件的訪問，符合 WHATWG 標準。

url-parse 提供對 URL 各個組件的訪問，包括查詢字串。

url 模組提供對整個 URL 組件的訪問，包括協議、主機、路徑和查詢字串。

query-string 主要專注於查詢字串的處理，不提供對整個 URL 組件的訪問。

url-search-params 只提供對查詢字串組件的訪問，允許您操作查詢參數。

whatwg-url 在所有主流瀏覽器中均可用，並且對遵循 WHATWG 標準的環境提供一致的支持。

url-parse 在所有主流瀏覽器中均可用，並且對舊版瀏覽器有良好的支持。

url 模組是 Node.js 的內建模組，主要用於伺服器端，但在瀏覽器環境中不適用。

query-string 在所有主流瀏覽器中均可用，並且對舊版瀏覽器有良好的支持。

url-search-params 是瀏覽器的原生 API，所有現代瀏覽器均支持，但在舊版瀏覽器中可能需要 polyfill。

WHATWG URL 解析範例

import { URL } from 'whatwg-url';

const url = new URL('https://www.example.com/path?name=John&age=30');

// 訪問 URL 組件
console.log(url.protocol); // 輸出: https:
console.log(url.hostname);  // 輸出: www.example.com
console.log(url.search);    // 輸出: ?name=John&age=30

// 使用 URLSearchParams 操作查詢參數
const params = url.searchParams;
params.append('hobby', 'reading');
params.delete('age');
console.log(params.toString()); // 輸出: name=John&hobby=reading

URL 解析範例

import URLParse from 'url-parse';

const parsedUrl = URLParse('https://www.example.com/path?name=John&age=30', true);
console.log(parsedUrl);
// 輸出: URL { ... , query: { name: 'John', age: '30' }, ... }

// 訪問查詢參數
const name = parsedUrl.query.name;
const age = parsedUrl.query.age;
console.log(name, age);
// 輸出: John 30

URL 解析與序列化範例

const url = require('url');

// 解析 URL
const parsedUrl = url.parse('https://www.example.com/path?name=John&age=30');
console.log(parsedUrl);
// 輸出: { protocol: 'https:', host: 'www.example.com', pathname: '/path', query: 'name=John&age=30', ... }

// 序列化 URL
const serializedUrl = url.format(parsedUrl);
console.log(serializedUrl);
// 輸出: https://www.example.com/path?name=John&age=30

查詢字串解析與序列化範例

import queryString from 'query-string';

// 解析查詢字串
const parsed = queryString.parse('?name=John&age=30&hobbies=reading&hobbies=traveling');
console.log(parsed);
// 輸出: { name: 'John', age: '30', hobbies: ['reading', 'traveling'] }

// 序列化物件為查詢字串
const stringified = queryString.stringify({ name: 'Jane', age: 25, hobbies: ['music', 'sports'] });
console.log(stringified);
// 輸出: name=Jane&age=25&hobbies=music&hobbies=sports

查詢字串操作範例

const params = new URLSearchParams('?name=John&age=30');

// 添加查詢參數
params.append('hobby', 'reading');

// 刪除查詢參數
params.delete('age');

// 修改查詢參數
params.set('name', 'Jane');

// 轉換為查詢字串
const queryString = params.toString();
console.log(queryString);
// 輸出: name=Jane&hobby=reading