การทำงานกับ URLSearchParams ใน JavaScript

ดังที่คุณทราบอยู่แล้ว เมื่อทำงานกับแบบฟอร์มและ คำขอ GET ใน JavaScript จะเกิดสตริง ในรูปแบบนี้:

javascriptlet paramsString = 'a=1&b=2&c=3';

บางครั้งจำเป็นต้องเปลี่ยนค่า ของพารามิเตอร์บางตัวจากสตริงนี้โดยใช้โปรแกรม การเขียนโค้ดที่ทำสิ่งนี้ไม่ค่อย สะดวก ดังนั้นใน JavaScript จึงมีคลาสพิเศษ URLSearchParams สำหรับทำงานกับ สตริงดังกล่าว

มาสร้างออบเจ็กต์ของคลาสนี้กัน โดยส่ง พารามิเตอร์เป็นสตริงพารามิเตอร์ของเรา:

javascriptlet paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

มาดูกันว่าวิธีใดบ้างที่มีในออบเจ็กต์ที่สร้างขึ้น

การรับค่าพารามิเตอร์

ใช้เมธอด get เพื่อรับ ค่าของพารามิเตอร์:

javascriptlet res = searchParams.get('a');
console.log(res);

ลองรับค่าของพารามิเตอร์ที่ไม่มีอยู่

javascriptlet res = searchParams.get('x');
console.log(res); // จะแสดง null

การตรวจสอบการมีอยู่ของพารามิเตอร์

ใช้เมธอด has เพื่อตรวจสอบ การมีอยู่ของพารามิเตอร์ ตรวจสอบพารามิเตอร์ที่มีอยู่:

javascriptlet res = searchParams.has('a');
console.log(res); // จะแสดง true

ตรวจสอบพารามิเตอร์ที่ไม่มีอยู่:

javascriptlet res = searchParams.has('x');
console.log(res); // จะแสดง false

การแปลงเป็นสตริง

ใช้เมธอด toString เพื่อแปลง ออบเจ็กต์ของเรากลับเป็นสตริง:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&b=2&c=3'

การเปลี่ยนพารามิเตอร์

ใช้เมธอด set เพื่อเปลี่ยน ค่าของพารามิเตอร์:

javascriptsearchParams.set('b', 'x');

ตรวจสอบการเปลี่ยนแปลง:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&b=x&c=3'

การเพิ่มพารามิเตอร์

ใช้เมธอด set เพื่อเพิ่ม พารามิเตอร์ใหม่ได้เช่นกัน:

javascriptsearchParams.set('d', '4');

ตรวจสอบการเปลี่ยนแปลง:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&b=2&c=3&d=4'

การเพิ่มพารามิเตอร์

ใช้เมธอด append เพื่อ เพิ่มพารามิเตอร์ใหม่ได้เช่นกัน:

javascriptsearchParams.append('d', '4');

ตรวจสอบการเปลี่ยนแปลง:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&b=2&c=3&d=4'

ลองเพิ่มพารามิเตอร์ที่มีอยู่แล้ว

javascriptsearchParams.append('a', '4');

ในกรณีนี้ เมธอดของเราจะเพียงเพิ่มพารามิเตอร์ชื่อเดียวกัน ไปที่ท้าย:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&b=2&c=3&a=4'

นี่คือความแตกต่างระหว่างเมธอด set และ append อันแรกจะเปลี่ยน พารามิเตอร์ที่มีอยู่ ในขณะที่อันที่สองจะเพียงเพิ่ม สำเนาของมันไปที่ท้าย

การลบพารามิเตอร์

ใช้เมธอด delete เพื่อลบ พารามิเตอร์:

javascriptsearchParams.delete('b');

ตรวจสอบการเปลี่ยนแปลง:

javascriptlet res = searchParams.toString();
console.log(res); // จะแสดง 'a=1&c=3'

การวนลูปผ่านพารามิเตอร์

สามารถวนลูปผ่านพารามิเตอร์ได้:

javascriptfor (let p of searchParams) {
  console.log(p);
}

พารามิเตอร์ที่เหมือนกันหลายตัว

สมมติว่าในสตริงของเรามีพารามิเตอร์ที่เหมือนกัน หลายตัว:

javascriptlet paramsString = 'a=1&a=2b=2&c=3';

ใช้เมธอด getAll เพื่อรับ อาร์เรย์ของค่าพารามิเตอร์เหล่านี้:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // จะแสดง [1, 2]

โจทย์ฝึกปฏิบัติ

สมมติว่ามีสตริงพารามิเตอร์ต่อไปนี้:

javascriptlet paramsString = 'test1=param1&test2=param2&test3=param3';