使用 JS 取得 Query String 資料

前言

Node.js 中的核心模組 url 提供了原生的 API 提供開發者解析 QueryString

let url = require('url')
let string = '/comment?name=狄倫&gender=男&hobby=coding'
url.parse(string, true)
// output：
// {
//   protocol: null,
//   slashes: null,
//   auth: null,
//   host: null,
//   port: null,
//   hostname: null,
//   hash: null,
//   search: '?name=名字&message=我是一則訊息',
//   query: { name: '狄倫', gender: '男', hobby: 'coding },
//   pathname: '/comments',
//   path: '/comments?name=名字&message=我是一則訊息',
//   href: '/comments?name=名字&message=我是一則訊息' 
// }

今天如果不使用這個 API，我們也可以試著來實現看看簡易版的功能，將網址中的 QueryString 取出

實作

假設這組字串是由前端傳遞過來的 QueryString

let string = '/comment?name=狄倫&gender=男&hobby=coding'

將 QueryString 部分拆解出來

let data = string.split('?')
// output：
// ["/comment", "name=狄倫&gender=男&hobby=coding"]
let queryStr = data[1]

接著再將每個 Key/Value Pair 拆分開

let queryString = queryStr.split('&')
// output：
// ["name=狄倫", "gender=男", "hobby=coding"]

遍歷資料，將各組 Key/Value 整理成物件格式

let obj = {}

queryString.forEach(item => {
  let data = item.split('=')
  obj[data[0]] = data[1]
})
// output：
// {name: "狄倫", gender: "男", hobby: "coding"}

包裝成函式

function parseQueryString (urlString) {
	let queryStr = urlString.split('?')[1].split('&')
  let obj = {}
  queryStr.forEach(item => {
    let data = item.split('=')
    obj[data[0]] = data[1]
  })
  return obj
}

相關延伸

JavaScript 取得 Url 的 Query String