שינוי קל של כתובות אתרים באמצעות URLSearchParams

ה-API של URLSearchParams מספק ממשק עקבי לחלקים ולחלקים של כתובת ה-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']

למחוק פרמטרים:

params.delete('person');

עבודה עם כתובות אתרים

רוב הזמן אתם בדרך כלל עובדים עם כתובות URL מלאות או משנים את כתובת ה-URL של האפליקציה. ה-constructor של 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 עדיין לא מוטמע ב-Chrome, אבל הוא גם משתלב עם ה-constructor של URL והתג a. שתיהן תומכות בחבר החדש שלנו על ידי אספקת מאפיין לקריאה בלבד, .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 באפליקציה בעולם האמיתי, כדאי לעיין ב-Polymer's Design Design Generator. השתמשתי בו כדי להגדיר את המצב הראשוני של האפליקציה מקישור עומק. די שימושי :)