ทำงานกับพารามิเตอร์ Query String
พารามิเตอร์ query string เป็นวิธีทั่วไปในการส่งข้อมูลใน URL การเข้าใจวิธีจัดการพวกมันอย่างถูกต้องเป็นสิ่งจำเป็น
โครงสร้าง Query String
Query string เริ่มต้นด้วย ? และมีคู่ key-value: https://example.com/search?q=javascript&page=2&sort=date โครงสร้าง: ? เริ่มต้น query string, q=javascript พารามิเตอร์แรก, & แยกพารามิเตอร์, page=2 พารามิเตอร์ที่สอง, sort=date พารามิเตอร์ที่สาม คีย์และค่าต้องเข้ารหัสแยกกัน: ไม่ถูกต้อง: ?key&value=data, ถูกต้อง: ?key=&value=data (คีย์ที่มีค่าว่าง) หรือ ?key=true&value=data
การสร้าง Query String
JavaScript (สมัยใหม่): let params = new URLSearchParams(); params.append('q', 'Tom & Jerry'); params.append('page', '2'); let url = 'https://api.com/search?' + params.toString(); → 'https://api.com/search?q=Tom+%26+Jerry&page=2' URLSearchParams จัดการการเข้ารหัสโดยอัตโนมัติ! JavaScript (ด้วยมือ): let query = encodeURIComponent('Tom & Jerry'); let page = encodeURIComponent('2'); let url = `https://api.com/search?q=${query}&page=${page}`; เข้ารหัสแต่ละค่าแยกกัน
การแยกวิเคราะห์ Query String
JavaScript: let url = new URL('https://example.com/search?q=Tom+%26+Jerry&page=2'); let params = url.searchParams; params.get('q') → 'Tom & Jerry' (ถอดรหัสโดยอัตโนมัติ) params.get('page') → '2' params.has('sort') → false วนซ้ำพารามิเตอร์ทั้งหมด: for (let [key, value] of params) { console.log(key, value); } URLSearchParams จัดการการถอดรหัสโดยอัตโนมัติ
ลองใช้เครื่องมือ
เข้ารหัส/ถอดรหัส URL