การจัดการ URL อย่างง่ายดายด้วย URLSearchParams

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 มีประโยชน์มาก :)