JavaScript >> Javascript 文檔 >  >> Tags >> object

如何使用 JavaScript 將對象轉換為查詢字符串

在 JavaScript 中,有多種方法可以將對象轉換為查詢字符串。最簡單最直接的方法是使用URLSearchParams 界面。如果需要支持舊版瀏覽器,請使用 map() 的組合 和 join() 方法。

URLSearchParams

URLSearchParams 接口提供實用方法來處理 JavaScript 中 URL 的查詢字符串。可用於添加、刪除和更新查詢字符串參數。

這是一個例子:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const qs = '?' + new URLSearchParams(params).toString()
console.log(qs)
// ?name=John+Doe&profession=Web+Designer&age=29

在上面的例子中,我們將一個對像傳遞給 URLSearchParams() 構造函數,然後調用 toString() 獲取查詢字符串的方法。注意 toString() 方法返回一個不帶問號的查詢字符串。

map() &join()

在舊瀏覽器中將對象轉換為查詢字符串:

  1. 使用 Object.keys() 將所有對象的鍵作為數組獲取的方法。
  2. 使用 Array.map() 方法來遍歷數組。
  3. 在每次迭代期間,使用 encodeURIComponent() 對值進行編碼,然後返回一個包含查詢參數名稱和值的字符串。
  4. 使用 Array.join() 通過 &符號 & 連接所有字符串的方法 符號。

將上述對象轉換為查詢字符串的最簡單方法是使用 map() 的組合 和 join() JavaScript 函數:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const qs =
  '?' +
  Object.keys(params)
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&')

console.log(qs)
// ?name=John%20Doe&profession=Web%20Designer&age=29

querystring 模塊

如果您使用的是 Node.js,請使用本機 querystring 將對象轉換為查詢字符串參數的模塊,如下所示:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const querystring = require('querystring')
const qs = '?' + querystring.stringify(params)

console.log(qs)
// ?name=John%20Doe&profession=Web%20Designer&age=29

querystring 模塊自動編碼查詢字符串參數,所以你不需要做任何事情。


Tutorial JavaScript 教程
  1. 查找字符串中最長的單詞

  2. 在沒有 react-native 鏈接的情況下安裝 react-native-sentry

  3. React &Tailwind - 開源初學者和 UI 工具包

  4. 20 個最佳 Laravel 教程(2022 年免費和付費資源)

  5. 儘管承諾未解決,腳本仍結束

  6. 使用 ReactJS 進行前端技術面試

  7. React 的前 10 個 React 項目🚀🚀

  1. 為什麼要在 Javascript 中使用默認參數?

  2. 選擇正確的 Node.js 框架:Express、Koa 還是 Hapi?

  3. 使用 i18next 實現 Deno 的國際化 (i18n)

  4. Next js 中的文件上傳

  5. 如何替換 div 元素中的文本?

  6. 在 Vue.js 中使用存儲庫設計模式使用 API

  7. 聚焦 <input> 時防止 iphone 默認鍵盤

  1. Datta Able - Flask、Django、React 和 Firebase 的免費初學者

  2. 每個程序員都應該了解同步代碼與異步代碼

  3. ES6 用蠟筆解構

  4. 編譯器和轉譯器