วิธีการแปลง Object ไปเป็น Query String Parameters ใน JavaScript (ES6)

พอดีใน App ที่เขียนโดย React มีต้องใช้การแปลง Object ไปเป็น Query String Parameters สำหรับใช้ใน URL อีกที เลยมาเขียน Blog วิธีทำไว้อีกครั้ง

ตัวอย่าง

ขอใช้ Object โดยมีลักษณะแบบนี้

const params = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
};

โดนจะทำการแปลงค่าเป็น Query String Parameters สำหรับนำไปผูกใช้งานกับ URL ต่อไป ลักษณะดังนี้

a=1&b=2&c=3&d=4

เริ่มต้นใช้ Object.keys() ในการ Return ค่าออกมาเป็น Array

const queryString = Object.keys(params)
// Array ["a", "b", "c", "d"]

จากนั้นใช้ Map วนลูปค่า โดยใช้ Template strings ในการประกอบ Key คั่นด้วยเครื่องหมาย “=” ตามด้วยค่าที่ใช้ Key อ้างถึง ซึ่งเหมือนกับด้านล่างนี้

const queryString = Object.keys(params).map(key => `${key}=${params[key]}`);
// Array ["a=1", "b=2", "c=3", "d=4"]

จากนั้นใช้ Join เพื่อผู้ค่าทั้งหมดเข้าด้วยกัน ด้วยเครื่องหมาย “&”

const queryString = Object.keys(params).map(key => `${key}=${params[key]}`).join("&");
// "a=1&b=2&c=3&d=4"

ถ้ารู้ว่ามี key และ value ที่มีความจำเป็นต้อง encode ก็ควรจะใช้ encodeURIComponent() ร่วมด้วย เหมือนกับด้านล่างนี้

const queryString = Object.keys(params).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join("&");