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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

searchParams.delete('b');

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มพารามิเตอร์ test3 อีกหนึ่งตัวลงในสตริงนี้

ลบพารามิเตอร์ test2 ออกจากสตริงนี้

เปลี่ยนพารามิเตอร์ test1 เป็นค่าใหม่