Łatwe manipulowanie adresami URL za pomocą parametru URLSearchParams

Eric Bidelman

Twitter GitHub Strona główna

Interfejs URLSearchParams API zapewnia spójny interfejs do bitów i fragmentów adresu URL oraz umożliwia proste manipulowanie ciągiem zapytania (który następuje po ?).

Dawniej deweloperzy używają wyrażeń regularnych i podziału ciągów znaków, aby wyodrębniać parametry zapytania z adresu URL. Jeśli jesteśmy szczerzy wobec siebie, nie jest to przyjemne. Naprawienie błędów może być żmudne, a wprowadzanie ich w błędzie jest podatne. Jednym z moich mrocznych sekretów jest to, że udało mi się ponownie wykorzystać te same get|set|removeURLParameter metody pomocnicze w kilku rozbudowanych aplikacjach na Google.com, w tym w Trasych Świętego Mikołaja w Google i na stronie Google I/O 2015.

Czas na odpowiedni interfejs API, który zrobi to za nas!

Interfejs API URLSearchParams

Wypróbuj wersję demonstracyjną

Chrome 49 implementuje URLSearchParams ze specyfikacji adresu URL, czyli interfejsu API, który przydaje się podczas pracy z parametrami zapytania w adresie URL. Uważam, że URLSearchParams to odpowiednik udogodnień adresów URL, tak jak FormData w przypadku formularzy.

Co można z nim zrobić? Na podstawie podanego adresu URL możesz łatwo wyodrębnić wartości parametrów:

// 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

Uwaga: jeśli parametr ma kilka wartości, get zwraca pierwszą wartość. Wykonaj iterację, zamiast parametrów:

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

ustaw wartość parametru:

params.set('version', 2);

Uwaga: jeśli istnieje kilka wartości, set usuwa wszystkie pozostałe parametry o tej samej nazwie.

append inną wartość do istniejącego parametru:

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

usuń parametr(y):

params.delete('person');

Uwaga: ten przykład usuwa z adresu URL wszystkie parametry zapytania person, a nie tylko pierwsze wystąpienie.

Praca z adresami URL

Zwykle pracujesz z pełnymi adresami URL lub modyfikując adres URL aplikacji. Konstruktor URL może być szczególnie przydatny w tych przypadkach:

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'

Aby wprowadzić rzeczywiste zmiany w adresie URL, możesz pobrać parametry, zaktualizować ich wartości, a potem zaktualizować adres URL za pomocą funkcji history.replaceState.

// 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

W tym miejscu wykorzystałem ciągi tekstowe szablonu ES6 do zrekonstruowania zaktualizowanego adresu URL na podstawie istniejącej ścieżki adresu URL aplikacji i zmodyfikowanych parametrów.

Integracja z adresami URL innych miejsc

Domyślnie wysłanie żądania FormData w żądaniu interfejsu API fetch() powoduje utworzenie wieloczęściowej treści. W razie potrzeby URLSearchParams udostępnia alternatywny mechanizm dla danych POST zakodowanych w postaci adresu URL, zamiast stosowania metody wieloczęściowej MIME.

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

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

Chociaż nie został on jeszcze wdrożony w Chrome, URLSearchParams integruje się również z konstruktorem URL i tagami a. Obie funkcje obsługują naszego nowego znajomego, udostępniając właściwość tylko do odczytu (.searchParams) do uzyskiwania dostępu do parametrów zapytania:

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

Linki otrzymują też właściwość .searchParams:

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

Wykrywanie funkcji i obsługa przeglądarek

Obecnie Chrome 49, Firefox 44 i Opera 36 obsługują język URLSearchParams.

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

W przypadku elementów polyfill zalecamy użycie tej dostępnej na stronie github.com/WebReflection/url-search-params.

Demonstracyjny

Wypróbuj przykład.

Aby zobaczyć, jak wygląda URLSearchParams w rzeczywistej aplikacji, wypróbuj Generator ikonset interfejsu Material Design Polymer. Plik został użyty do skonfigurowania stanu początkowego aplikacji na podstawie precyzyjnego linku. Przydatne :)