作者：乔·阿塔迪✏️
URL 是网络应用的核心组件。尤其在应用需要向 API 发送请求时，构建正确的 URL 至关重要。所有现代浏览器都支持 URL API，它提供了一种解析和操作 URL 的便捷方法，允许轻松访问 URL 的各个组成部分。
理解 URL 的结构
让我们以以下 URL 为例：
https://example.com/api/search?query=foo&sort=asc#results
立即学习“Java免费学习笔记（深入）”；
这个 URL 包含以下部分：
协议: https主机: example.com路径: /api/search查询字符串: ?query=foo&sort=asc片段标识符: #results
借助现代 JavaScript，我们可以解析 URL 并提取这些不同的部分。
解析 URL
(可选) 安装插件以集成您的技术栈。
const url = new URL('https://example.com/api/search?query=foobar');console.log(url.host); // example.comconsole.log(url.pathname); // /api/searchconsole.log(url.search); // ?query=foobar
const url = new URL('https://example.com/api/search?query=foobar&maxresults=10');console.log(url.searchParams.get('query')); // foobarconsole.log(url.searchParams.get('maxresults')); // 10
const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']
const params = new URLSearchParams();params.append('foo', 'bar');params.append('baz', 'qux');params.append('tag', 'one&two');console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two
function listQueryParams(queryString) { const params = new URLSearchParams(queryString); params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));}
const url = new URL('https://example.com/api/search');url.searchParams.append('query', 'test');url.searchParams.append('tag', 'tag1');url.searchParams.append('tag', 'tag2');// https://example.com/api/search?query=test&tag=tag1&tag=tag2console.log(url.toString());
function isValidURL(url) { try { new URL(url); return true; } catch (error) { return false; }}
URL.canParse(urlString); // 返回true或false
以上就是在 JavaScript 中使用 URL的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500066.html
微信扫一扫 
支付宝扫一扫 
