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

แนะนำวิธีแปลง JavaScript Object ไปเป็น Query String Parameters สำหรับใช้ใน URL โดยใช้ Object.keys(), map(), template literals และ join()

ศิริชัย ธีรภัทรสกุล (ตั้ม)อ่าน 2 นาที11 เมษายน 2563

พอดีใน 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("&");