دستکاری آسان URL با URLSearchParams

URLSearchParams API یک رابط ثابت برای بیت‌ها و تکه‌های URL فراهم می‌کند و امکان دستکاری بی‌اهمیت رشته پرس و جو را فراهم می‌کند (این موارد بعد از ? ).

به طور سنتی، توسعه دهندگان از regex و تقسیم رشته برای بیرون کشیدن پارامترهای پرس و جو از URL استفاده می کنند. اگر همه ما با خودمان صادق باشیم، جالب نیست. درست شدن می تواند خسته کننده و مستعد خطا باشد. یکی از رازهای تاریک من این است که از همان روش‌های کمکی get|set|removeURLParameter در چندین برنامه بزرگ Google.com از جمله Google Santa Tracker و 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 فراهم می‌کند که به جای چندبخشی urlencod شده‌اند.

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

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

اگرچه هنوز در کروم پیاده‌سازی نشده است، URLSearchParams همچنین با سازنده 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 در یک برنامه دنیای واقعی، Iconset Generator طراحی مواد پلیمر را بررسی کنید. من از آن برای تنظیم وضعیت اولیه برنامه از یک پیوند عمیق استفاده کردم. خیلی خوش دست :)