在 JavaScript 中使用 URL-js教程-PHP中文网

在 JavaScript 中使用 URL

心靈之曲

发布： 2024-12-26 09:15:35

转载

637人浏览过

在 javascript 中使用 url

作者：乔·阿塔迪✏️

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

在 URL API 出现之前，开发者通常使用 <a></a>

(可选) 安装插件以集成您的技术栈。

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

登录后复制

const url = new URL('https://example.com/api/search?query=foobar&maxresults=10');
console.log(url.searchParams.get('query')); // foobar
console.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=tag2
console.log(url.toString());

登录后复制

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

登录后复制

URL.canParse(urlString); // 返回true或false

登录后复制

以上就是在 JavaScript 中使用 URL的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

正则表达式高级技巧_匹配复杂模式的实战案例 Node.js与区块链环境下的CP-ABE实现挑战及跨语言方案 JavaScript解密方法_javascript编码转换函数柯里化实现_javascript高级技巧 Node.js与区块链项目中CP-ABE实现策略：跨语言方案与集成考量