Parametry řetězce dotazu byly na straně serveru neuvěřitelně užitečné od doby, kdy se internet rozjel, ale až když se webové aplikace řízené AJAX staly populární, na straně klienta jsme na ně příliš spoléhali. Nejen, že získáváme hodnoty parametrů, ale upravujeme je také dynamicky pomocí History
API, takže tyto parametry hrají hlavní roli mimo počáteční načtení stránky.
Vždy jsme byli schopni získat celý řetězec dotazu pomocí window.location.search
vlastnost:
console.log(window.location.search); // "?post=1234&action=edit"
...ale ve světě setterů, getterů a JSON musí existovat lepší způsob, jak získat hodnoty, než je analýza řetězce, že? Po letech ošklivé analýzy řetězce existuje lepší způsob:URLSearchParams
Pojďme se podívat, jak můžeme toto nové API použít k získání hodnot z místa!
// Assuming "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
URLSearchParams
také poskytuje známý Object
metody jako keys()
, values()
a entries()
:
var keys = urlParams.keys(); for(key of keys) { console.log(key); } // post // action var entries = urlParams.entries(); for(pair of entries) { console.log(pair[0], pair[1]); }
URLSearchParams
hodně mi připomíná classList
API -- velmi jednoduché metody, přesto velmi užitečné.
Záloha jazyka JavaScript
Zatímco URLSearchParams
je ideální, ne všechny prohlížeče toto API podporují. K dispozici je polyfill, ale pokud chcete malou funkci pro základní analýzu řetězce dotazu, následuje funkce ukradená ze sady nástrojů A-Frame VR, která analyzuje řetězec dotazu, aby získala požadovanou hodnotu klíče:
function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); };
Pomocí výše uvedené funkce můžete získat jednotlivé hodnoty parametrů:
getUrlParameter('post'); // "1234" getUrlParameter('action'); // "edit"
Každopádně si tuto funkci užijte – zjistíte, že ji potřebujete víc, než si myslíte!