منابع آموزشی و پژوهشی، برای دانشگاه و مدرسه
پشتیبانیانتشار محتوا
CODEX/سطح ۱؛ مرورگر و رویدادjavascriptURL and URLSearchParams

پارامترهای نشانی در جاوااسکریپت

پارامتر نشانی در جاوااسکریپت را با URL و URLSearchParams بخوانید و بسازید؛ متن query، مقدار تکراری و تفاوت نبود کلید با رشتهٔ خالی.

مفهوم به زبان ساده

نشانی یک صفحه می‌تواند وضعیت جست‌وجو یا شمارهٔ صفحه را در بخش query نگه دارد. URL اجزای نشانی را جدا می‌کند و searchParams برای خواندن و تغییر پارامترها ابزار می‌دهد. این کار از بریدن دستی رشته با علامت‌های سؤال و مساوی روشن‌تر است و قواعد کدگذاری متن را هم مدیریت می‌کند. ساختن URL در نمونه، خودش صفحه را جابه‌جا نمی‌کند.

get نخستین مقدار یک کلید را به شکل متن می‌دهد و در نبود کلید null برمی‌گرداند. یک کلید می‌تواند چند بار تکرار شود؛ getAll همهٔ مقدارهای همان نام را می‌گیرد. set مقدار قبلی آن کلید را جایگزین می‌کند، در حالی که append مقدار دیگری اضافه می‌کند. نمونه با دادهٔ فارسی و دو برچسب، تفاوت این خواندن‌ها را نشان می‌دهد.

شمارهٔ صفحهٔ خوانده‌شده هنوز متن است و پیش از استفاده به تبدیل و بررسی محدوده نیاز دارد. از قبل متن را percent-encode نکنید و سپس به set ندهید؛ این ابزار هنگام تولید نشانی کدگذاری لازم را انجام می‌دهد. در تمرین، پارامتر q را خالی و سپس کاملاً حذف کنید و خروجی get را مقایسه کنید. دادهٔ حساس را در نشانی نگذارید؛ URL می‌تواند در تاریخچه، گزارش‌ها و پیوندهای اشتراکی دیده شود.

کجا به کار می‌آید؟

  • ساخت پیوند قابل اشتراک برای جست‌وجو و فیلتر
  • خواندن شمارهٔ صفحه و چند مقدار هم‌نام بدون تجزیهٔ دستی نشانی

از تعریف تا یک مثال واقعی

javascript
const url = new URL('https://example.com/lessons?page=2&tag=js&tag=web');
url.searchParams.set('q', 'آموزش وب');
console.log(url.searchParams.get('page'));
console.log(typeof url.searchParams.get('page'));
console.log(url.searchParams.getAll('tag').join(', '));
console.log(url.searchParams.get('q'));
console.log(url.searchParams.get('missing') === null);
خروجی مورد انتظار
2
string
js, web
آموزش وب
true
کد را تغییر دهید و نتیجه را ببینید.

این مثال چطور کار می‌کند؟

  1. URL یک شیء محلی از نشانی نمونه می‌سازد و هیچ درخواستی نمی‌فرستد.

  2. page متن است و getAll هر دو برچسب را می‌دهد.

  3. set متن فارسی را نگه می‌دارد؛ کلید ناموجود null می‌دهد.

اشتباه رایج

get مقدار عددی یا بولی تحویل نمی‌دهد. همچنین get فقط نخستین مقدار را می‌گیرد؛ برای پارامتر تکرارشونده getAll و قرارداد مشخص لازم است.

این را به خاطر بسپارید

نشانی را با ابزار URL پردازش کنید و دادهٔ query را مانند هر ورودی بیرونی، متن نیازمند بررسی بدانید.

بازگشت به نقشهٔ مفاهیم
یکجا انتخاب کن، راحت‌تر دریافت کن

انتخاب‌های من ۰ منبع

مجموعهٔ مطالعه‌ات را بساز.

کنار مقاله‌ها «انتخاب» را بزنید تا چند فایل را با هم دریافت کنید.

انتخاب مقاله‌های رایگان