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

Eric Bidelman

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

หมายเหตุ: หากพารามิเตอร์มีหลายค่า get จะแสดงผลค่าแรก ทำซ้ำในพารามิเตอร์:

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

ตั้งค่าค่าพารามิเตอร์ ดังนี้

params.set('version', 2);

หมายเหตุ: หากมีหลายค่า set จะนำพารามิเตอร์อื่นๆ ทั้งหมดที่มีชื่อเดียวกันออก

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

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

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

params.delete('person');

หมายเหตุ: ตัวอย่างนี้นำพารามิเตอร์การค้นหา person ทั้งหมดออกจาก URL ไม่ใช่แค่รายการเดียว

การทำงานกับ 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(...)

แม้ว่าจะยังไม่ได้ติดตั้งใช้งานใน 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
}

สำหรับ polyfills เราขอแนะนำให้ใช้หน่วยโฆษณาที่ github.com/WebReflection/url-search-params

ข้อมูลประชากร

ลองใช้ตัวอย่าง

หากต้องการดู URLSearchParams ในแอปในชีวิตจริง ให้ไปที่เครื่องมือสร้าง Iconset สำหรับดีไซน์ Material ของ Polymer ฉันใช้เพื่อตั้งค่าสถานะเริ่มต้นของแอปจาก Deep Link มีประโยชน์มาก :)