JavaScript 使用 qs.js 快速解析 QueryString

使用 CDN 引用 qs.js

    
<script src="https://cdn.jsdelivr.net/npm/qs@6.11.2/dist/qs.min.js"></script>
    

取得 QueryString

假設網址如下：

    
https://examp.com/index.html?q1=a&q2=b&q2=c
    

使用

    
// get query string
const query = window.location.search;
console.log(query); // ?q1=a&q2=b&q2=c

// 使用 qs.js 讀取
const parsed = Qs.parse(query, {ignoreQueryPrefix: true});

// 以 json 格式輸出
console.log(JSON.stringify(parsed)); // {"q1":"a","q2":["b","c"]}

    

替換 QueryString

qs.js 也可以很簡單的幫我們替換網址，並且會自動做好 URL encode

    
const data = {
    name: '小明',
    age: 18,
    hobbies: ['寫程式', '羽毛球'],
};

const queryString = Qs.stringify(data);
console.log(queryString); // name=小明&age=18&hobbies%5B0%5D=寫程式&hobbies%5B1%5D=羽毛球

// 更新網址
window.history.pushState({}, '', `?${queryString}`);
    

參考資料：
npm - qs
jsdelivr - qs