Giới thiệu
Hôm nay sẽ là một bài viết khá ngắn gọn :v
URL
Thông thường, để get thông tin url hiện tại, chúng ta thường sử dụng window.location và thu được kết quả như sau:
Ngoài window.location thì URL cũng cung cấp một số properties, methods giúp cho chúng ta có thể dễ dàng tạo, đọc và chỉnh sửa các thành phần của url như hostname, pathname,…
1 2 | url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">'https://developer.mozilla.org/en-US/docs/Web/API/URL#top'</span><span class="token punctuation">)</span> |
URLSearchParams
Parse query string là một trong những vấn đề thường gặp lúc làm việc với url.
Có nhiều thư viện xịn xò giải quyết vấn đề này như là qs hay query-string với hàng chục triệu lượt download mỗi tuần.
Tuy nhiên, để parse những url đơn giản thì chúng ta có thể sử dụng URLSearchParams đã có sẵn như sau:
Đầu tiên chúng ta sẽ dùng window.location.search để get query string của url hiện tại. Giả sử thu được kết quả như sau:
1 2 | <span class="token keyword">var</span> paramsString <span class="token operator">=</span> <span class="token string">"?user=trieu-quan-su&place=quan-net&place=rung"</span><span class="token punctuation">;</span> |
Bây giờ nếu muốn get place chúng ta sẽ dùng method get hoặc dùng getAll của URLSearchParams
1 2 3 4 | <span class="token keyword">var</span> searchParams <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span>paramsString<span class="token punctuation">)</span><span class="token punctuation">;</span> searchParams<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'place'</span><span class="token punctuation">)</span> <span class="token comment">// quan-net</span> searchParams<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token string">'place'</span><span class="token punctuation">)</span> <span class="token comment">// ["quan-net", "rung"]</span> |
Vậy là chúng ta đã lấy được giá trị của các query, cũng khá đơn giản mn nhỉ
Chúng ta cũng có thể lặp qua searchParams để lấy tất cả các (key,value) sử dụng for...of hoặc searchParams.forEach
Browser compatibility
Kết luận
Bài viết chỉ đến đây thôi, hy vọng sẽ giúp ích được cho mọi người ở những dự án sắp tới. Chúc mọi người thành công