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

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

ตัวอย่าง

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

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

วิธีการ

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

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

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

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

อ้างอิง : https://developer.mozilla.org/

Author:

ชื่อ ศิริชัย ธีรภัทรสกุล ชื่อเล่น “ตั้ม” ทำงานด้านพัฒนาเว็บไซต์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ และเขียนบล็อก