Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用 URLSearchParams 处理 QueryString

  解析 URL 里的 QueryString 一直都是很头疼的问题,虽然很多框架都有提供,但既然是这么常用的东西,为什么原生就不能提供呢?还真有,URLSearchParams 就是原生原来做这件事的。它可以将 QueryString 字符串解析成键值对,也可以将键值对转换成 QueryString 字符串。 <script> var params = new URLSearchParams('one=1&two=2'); console.log(params.get('one'), params.get('two')); // 1 2 </script> <script> var params = new URLSearchParams(); params.set('one', 1); params.set('two', 2); console.log(params.toString()); // one=1&two=2 </script>   之所以不是一个直接的对象是因为 QueryString 中的 key 可以重复,JavaScript 的对象无法满足。所以 URLSearchParams 的实例中还提供了 getAll 这样的方法用来获取同名属性的列表。比如:
<script> var params = new URLSearchParams('arr[]=1&arr[]=2'); console.log(params.getAll('arr[]')); // ["1", "2"] </script>   由于是个比较新的 API,所以它实现了 iterator。可以使用 for-of 来遍历:
<script> var params = new URLSearchParams('a=1&b=2&c=3'); for (let [key, value] of params) { console.log(key, value); // a 1 // b 2 // c 3 } </script>   不过这套 API 和 PHP 的那套非标准的结构化 QueryString 兼容得并不好,如果 API 设计是使用 PHP 的结构化 QueryString,也许用起来会有点别扭。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^