URLSearchParams
API มีอินเทอร์เฟซที่สอดคล้องกันกับบิตและส่วนต่างๆ ของ URL และอนุญาตให้มีการจัดการสตริงการค้นหาที่ไม่ซับซ้อน (ซึ่งเป็นสิ่งที่อยู่หลัง ?
)
แต่เดิมนักพัฒนาซอฟต์แวร์จะใช้นิพจน์ทั่วไปและการแยกสตริงเพื่อดึงพารามิเตอร์การค้นหาออกจาก URL ถ้าเราซื่อสัตย์กับตัวเอง คงไม่สนุกแน่ๆ
การทำงานอย่างถูกต้องอาจเป็นเรื่องน่าเบื่อหน่ายและเกิดข้อผิดพลาด ความลับอย่างหนึ่งของฉันคือฉันได้นำ
get|set|removeURLParameter
วิธีการของตัวช่วยเดียวกันมาใช้ซ้ำในแอป Google.com ขนาดใหญ่หลายแอป ซึ่งรวมถึง Google ตามติดซานต้าและเว็บ Google I/O 2015
ถึงเวลาสำหรับ API ที่เหมาะสมที่ทำสิ่งเหล่านี้ให้เราแล้ว
API URLSearchParams
Chrome 49 จะใช้ URLSearchParams
จากข้อกำหนดของ URL ซึ่งเป็น API ที่มีประโยชน์ในการจัดการกับพารามิเตอร์การค้นหา URL ฉันคิดว่า URLSearchParams
เป็นความสะดวกสบายเทียบเท่า URL
เพราะ FormData
เป็นรูปแบบ
แล้วคุณจะใช้ทำอะไรได้บ้าง เมื่อใช้สตริง URL คุณจะแยกค่าพารามิเตอร์ได้อย่างง่ายดาย ดังนี้
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');
params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3
for (let p of params) {
console.log(p);
}
ตั้งค่าค่าพารามิเตอร์
params.set('version', 2);
appendค่าอื่นสำหรับพารามิเตอร์ที่มีอยู่ ดังนี้
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
delete พารามิเตอร์:
params.delete('person');
การทำงานกับ URL
โดยส่วนใหญ่แล้ว คุณน่าจะใช้ URL แบบเต็มหรือแก้ไข URL ของแอป เครื่องมือสร้าง URL
จะมีประโยชน์เป็นพิเศษในกรณีเหล่านี้
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'
หากต้องการเปลี่ยนแปลง URL จริง คุณอาจดึงพารามิเตอร์ อัปเดตค่า แล้วใช้ history.replaceState
เพื่ออัปเดต URL ได้
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
ในหน้านี้ ผมใช้สตริงเทมเพลต ES6 เพื่อสร้าง URL ที่อัปเดตใหม่จากเส้นทาง URL ที่มีอยู่ของแอปและพารามิเตอร์ที่แก้ไข
การผสานรวมกับสถานที่อื่นๆ ที่ใช้ URL
โดยค่าเริ่มต้น การส่ง FormData
ในคำขอ API fetch()
จะสร้างเนื้อหาที่มีหลายส่วน
หากคุณต้องการ URLSearchParams
จะมีกลไกทางเลือกให้กับข้อมูล POST ที่มีการเข้ารหัส URL แทนที่จะเป็น MIME หลายส่วน
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
URLSearchParams
จะผสานรวมเข้ากับตัวสร้าง URL
และแท็ก a
แม้ว่าจะยังไม่ได้ติดตั้งใช้งานใน Chrome ทั้งคู่ให้การสนับสนุนบัดดี้ใหม่ของเราโดยมอบพร็อพเพอร์ตี้แบบอ่านอย่างเดียว .searchParams
สำหรับการเข้าถึงพารามิเตอร์การค้นหา
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
ลิงก์ยังได้รับพร็อพเพอร์ตี้ .searchParams
ด้วย:
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
การตรวจหาฟีเจอร์และการรองรับเบราว์เซอร์
ในปัจจุบัน Chrome 49, Firefox 44 และ Opera 36 รองรับ URLSearchParams
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
สำหรับโพลีฟิลล์ เราขอแนะนําให้ใช้ใน github.com/WebReflection/url-search-params
เดโม
ลองใช้ตัวอย่าง
หากต้องการดู URLSearchParams
ในแอปที่ใช้งานจริง โปรดดู Iconset Generator สำหรับดีไซน์ Material ของ Polymer ฉันเคยใช้เพื่อตั้งค่าสถานะเริ่มต้นของแอปจาก Deep Link มีประโยชน์มาก :)