Cách chuyển object thành query string parameter trong javascript

Nếu bạn đang tìm kiếm một thứ giống như title bài post, ắt hẳn bạn là một javascript (js) developer, mình nói chuẩn không nè :))).

Thông thường khi làm việc với js thỉnh thoảng bạn cần chuyển đổi từ object sang query string trên url vì object của js nhìn có nhiều điểm tuơng đồng với query string (có key và value), bên cạnh đó khi truyền query string giữa các hàm với nhau sử dụng object sẽ dễ dàng hơn nhiều.

Ví dụ về cách chuyển object sang query string

let params = {
    p1: 123,
    p2: "abc",
    p3: "123abc"
};

sau khi chuyển đổi: p1=123&p2=abc&p3=123abc

Sau đây là 4 cách mình lượm lặt được trong quá trình giải quyết vấn đề này.

1. Sử dụng map và join

Cách này sử dụng cho Nodejs và các trình duyệt hiện đại. Hàm map sẽ mapping tạo ra mảng string với giá trị giống giống như vầy “p1=123” sau đó dùng join “&” để nối thành chuỗi.

// ES6
let queryString = Object.keys(params).map(
    key => `${key}=${params[key]}`
).join('&');

// ES5
let queryString = Object.keys(params).map(function(key) {
    return key + '=' + params[key]
}).join('&');

2. Sử dụng querystring module trong Nodejs

Nếu bạn sử dụng trong Nodejs thì dùng cách này

const querystring = require('querystring');

let query = querystring.stringify(params);

console.log(query);

3. Sử dụng api của trình duyệt

Cách này sẽ chắc ăn hơn khi bạn không biết rõ key và value của bạn có đảm bảo không chứa các ký tự đặc biệt mà trình duyệt hỗ trợ hay không. Đó là sử dụng method encodeURIComponent có sẵn của trình duyệt.

// ES6
let queryString = Object.keys(params).map(
    key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
).join('&');

// ES5
let queryString = Object.keys(params).map((key) => {
    return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
}).join('&');

4. Sử dụng jquery

Nếu bạn là fan của jquery :v thì có thể sử dụng cách này.

1	let queryString = $.param(params);

Thực ra có thể còn nhiều cách nữa, nhưng trên đây là vài cách mình tìm được, hi vọng có thể giúp bạn giải quyết vấn đề, chúc vui.