JavaScript >> Javascript 文檔 >  >> Tags >> string

在 JavaScript 中獲取查詢字符串值

在 URL 中,查詢字符串值通常提供有關請求的信息,例如搜索參數或您正在使用的對象的 ID。如果在前端處理任何業務或請求邏輯,了解如何從 URL 中檢索查詢字符串值非常重要。有很多方法可以實現這一點,我們將在這裡看到其中的一些。

URLSearchParams

URLSearchParams 除了 IE 11 之外,所有主要瀏覽器版本都支持接口。它通過解析 URL 的查詢字符串並提供訪問值的方法來工作。例如:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); // 'node'
params.get('page'); // '2'

此接口的缺點之一是您必須僅將 URL 的查詢字符串傳遞給它。如果您正在使用當前瀏覽器 URL,這很容易做到,因為您只需傳遞 window.location.search .如果您正在使用任何其他 URL,則需要單獨解析並傳遞查詢字符串。

要將查詢參數解析為對象,請使用 URL.searchParams.entries() 方法,返回一個 Iterator 鍵/值對和 Object.fromEntries 將其轉換為對象。

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); // {q: 'node', page: '2'}

網址對象

URL 除了 IE 11 之外的所有主要瀏覽器版本也都支持 API。它提供了一種更靈活的 URL 解析方式,還提供了一種訪問查詢字符串值的方式。例如:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); // 'node'
searchParams.get('page'); // '2'

url.searchParamsURLSearchParams 返回的相同類型的實例對象 .

url 上面的對像也將 URL 的所有部分分解成各個部分。例如:

url.href; // 'https://stackabuse.com/search?q=node&page=2'
url.origin; // 'https://stackabuse.com'
url.protocol; // 'https:'
url.host; // 'stackabuse.com'
url.hostname; // 'stackabuse.com'
url.port; // ''
url.pathname; // '/search'
url.search; // '?q=node&page=2'
url.hash; // ''

純 JavaScript

如果由於某種原因您無法訪問上述 API 或希望對解析有更多控制權,您可以使用以下代碼將查詢字符串解析為對象。

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

注意 :有很多方法可以在純 JS 中解析查詢參數,其中一些比其他的更複雜(和健壯)。這只是一種方式,是根據這個要點改編的。

然後我們可以使用這個簡單的 JS 函數將單個查詢參數解析為字符串:

getQueryParams('https://stackabuse.com/search?q=node&page=2')
// { q: 'node', page: '2' }

Tutorial JavaScript 教程
  1. 開源壁紙製造商

  2. 使用 Mapbox 構建國家/地區突出顯示工具

  3. ES6、ES7、ES8 和編寫現代 JavaScript Pt6 – 箭頭函數和承諾

  4. 可取消的承諾工具

  5. JavaScript 後端和前端的區別

  6. PHP Ajax 上傳進度條

  7. 範圍 - JavaScript 概念

  1. 遠程公司清單:有效遠程團隊管理的策略

  2. 最好的 9 個 JavaScript 測試框架

  3. 帶索引分配的表排序

  4. 在兩個元素之間畫一條連接線

  5. 用於創建可點擊原型的輕量級 React 庫

  6. JavaScript 堆棧溢出錯誤

  7. Fluent UI/react-northstar 主題和組件樣式

  1. 使用 Anvil PDF 填充 API 重複 PDF 頁面

  2. 開始使用帶有 AJV 的 JSON Schema 驗證

  3. 創建 NPX 介紹卡

  4. Discord.js v13 命令處理程序(斜線 Cmds 和舊版 Cmds)