Обработка Query String параметров

Page.js — это минималистичная библиотека для маршрутизации на стороне клиента в приложениях на JavaScript. Одним из часто используемых механизмов является обработка Query String параметров, которые позволяют передавать данные через URL, например:

/products?category=books&page=2

В этом примере category и page являются параметрами Query String. Page.js не парсит их автоматически, но предоставляет все необходимые инструменты для их обработки.

Доступ к Query String параметрам

Page.js передает объект context (часто обозначается как ctx) в функции-обработчики маршрутов. Этот объект содержит информацию о текущем URL, включая путь, хэш и query-параметры в виде строки:

page('/products', (ctx) => {
    console.log(ctx.querystring);
});

Если перейти по URL /products?category=books&page=2, в консоли появится строка:

category=books&page=2

Это просто текстовая строка. Для удобной работы с параметрами её необходимо разобрать в объект.

Парсинг Query String в объект

Для преобразования query-параметров в объект можно использовать встроенный объект URLSearchParams:

page('/products', (ctx) => {
    const params = new URLSearchParams(ctx.querystring);
    const category = params.get('category'); // "books"
    const pageNumber = params.get('page');   // "2"
    console.log(category, pageNumber);
});

Особенности URLSearchParams:

  • Метод get(key) возвращает строку или null, если ключ отсутствует.
  • Метод has(key) проверяет наличие параметра.
  • Метод entries() позволяет получить итератор [ключ, значение] для всех параметров.
  • Метод forEach() позволяет перебрать все пары ключ-значение.

Пример перебора всех параметров:

page('/products', (ctx) => {
    const params = new URLSearchParams(ctx.querystring);
    params.forEach((value, key) => {
        console.log(`${key}: ${value}`);
    });
});

Множественные значения одного параметра

Query String может содержать несколько одинаковых ключей:

/search?tag=js&tag=frontend&tag=pagejs

URLSearchParams позволяет получить все значения одного ключа:

const params = new URLSearchParams(ctx.querystring);
const tags = params.getAll('tag'); // ["js", "frontend", "pagejs"]

Это удобно при фильтрации данных или реализации чекбоксов и тегов.

Модификация и построение Query String

Page.js предоставляет page.redirect() и page.show() для изменения маршрута, и можно динамически формировать query-параметры:

const params = new URLSearchParams();
params.set('category', 'books');
params.set('page', '3');
page.show(`/products?${params.toString()}`);

Методы set, append, delete позволяют управлять параметрами:

params.append('tag', 'js');
params.delete('page');

Обработка необязательных и дефолтных параметров

Не все query-параметры могут присутствовать в URL. Для безопасной работы стоит задавать дефолтные значения:

page('/products', (ctx) => {
    const params = new URLSearchParams(ctx.querystring);
    const category = params.get('category') || 'all';
    const pageNumber = parseInt(params.get('page')) || 1;
    console.log(category, pageNumber);
});

Применение parseInt или parseFloat необходимо для корректной работы с числовыми параметрами.

Встраивание Query String в маршруты с динамическими сегментами

Page.js поддерживает динамические сегменты URL:

page('/products/:id', (ctx) => {
    const productId = ctx.params.id;
    const params = new URLSearchParams(ctx.querystring);
    const ref = params.get('ref') || 'default';
    console.log(productId, ref);
});

Пример URL: /products/123?ref=homepage Результат: productId = "123", ref = "homepage"

Таким образом, динамические сегменты и query-параметры могут использоваться одновременно.

Практические рекомендации

  • Всегда использовать URLSearchParams для парсинга query-параметров.
  • Преобразовывать числовые параметры через parseInt или parseFloat.
  • Учитывать возможность отсутствия параметров и задавать дефолтные значения.
  • Использовать getAll для параметров с несколькими значениями.
  • Формировать query-параметры динамически через URLSearchParams для безопасного создания URL.

Пример комплексного использования

page('/search', (ctx) => {
    const params = new URLSearchParams(ctx.querystring);
    const query = params.get('q') || '';
    const pageNumber = parseInt(params.get('page')) || 1;
    const tags = params.getAll('tag');

    console.log(`Поиск: ${query}`);
    console.log(`Страница: ${pageNumber}`);
    console.log(`Теги: ${tags.join(', ')}`);

    // Формирование URL для пагинации
    const nextParams = new URLSearchParams(params);
    nextParams.set('page', pageNumber + 1);
    const nextUrl = `/search?${nextParams.toString()}`;
    console.log(`Следующая страница: ${nextUrl}`);
});

Такой подход обеспечивает полное управление query-параметрами в приложениях на Page.js, делая маршрутизацию гибкой и надежной.

Оглавление