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

URLSearchParams API มีอินเทอร์เฟซที่สอดคล้องกันสำหรับชิ้นส่วนต่างๆ ของ URL และอนุญาตให้มีการจัดการสตริงการค้นหา (ข้อมูลที่อยู่หลัง ?) ได้อย่างง่ายดาย

เดิมทีนักพัฒนาซอฟต์แวร์ใช้นิพจน์ทั่วไปและการแยกสตริงเพื่อดึงพารามิเตอร์การค้นหาออกจาก URL พูดตามตรงเลย มันไม่สนุกเลย ซึ่งอาจทําให้เกิดความผิดพลาดและใช้เวลานาน ความลับอันน่าอัศจรรย์อย่างหนึ่งของฉันก็คือการใช้วิธีการตัวช่วยget|set|removeURLParameterเดิมๆ ในแอป Google.com ขนาดใหญ่ๆ หลายๆ แอป ซึ่งรวมถึง Google ตามติดซานต้าและเว็บไซต์ Google I/O 2015

ถึงเวลาแล้วที่จะมี API ที่ถูกต้องซึ่งทําสิ่งเหล่านี้ให้เรา

URLSearchParams API

ลองใช้เดโม

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);

เพิ่มค่าอื่นสำหรับพารามิเตอร์ที่มีอยู่

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

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

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 ในคำขอ fetch() API จะสร้างเนื้อหาแบบหลายส่วน หากต้องการ URLSearchParams มีกลไกอื่นในการส่งข้อมูล POST ที่เข้ารหัส URL แทนการส่งแบบ MIME หลายส่วน

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

แม้ว่าจะยังไม่ได้ติดตั้งใช้งานใน Chrome แต่ URLSearchParams ยังผสานรวมกับเครื่องมือสร้าง URL และแท็ก a ด้วย ทั้ง 2 รายการรองรับเพื่อนใหม่ของเราโดยระบุพร็อพเพอร์ตี้ .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 ในแอปจริง ให้ดูเครื่องมือสร้างชุดไอคอนการออกแบบวัสดุของ Polymer เราใช้เพื่อตั้งค่าสถานะเริ่มต้นของแอปจาก Deep Link มีประโยชน์มากเลย :)