当前位置：首页 > JavaScript

js实现url

2026-03-15 11:29:27JavaScript

URL 解析与操作

在 JavaScript 中，可以使用 URL 对象或 URLSearchParams 来解析和操作 URL。以下是常见的方法：

解析 URL

const url = new URL('https://example.com/path?name=value#hash');
console.log(url.href);       // 完整 URL
console.log(url.origin);     // 协议 + 域名 + 端口
console.log(url.protocol);   // 协议 (https:)
console.log(url.hostname);   // 域名 (example.com)
console.log(url.pathname);   // 路径 (/path)
console.log(url.search);     // 查询参数 (?name=value)
console.log(url.hash);       // 哈希 (#hash)

修改 URL 参数

const url = new URL('https://example.com');
url.searchParams.set('key', 'value'); // 添加参数
url.searchParams.delete('key');       // 删除参数
console.log(url.href); // https://example.com/?key=value

解析查询参数

const params = new URLSearchParams('?a=1&b=2');
console.log(params.get('a')); // 1
console.log(params.toString()); // a=1&b=2

URL 编码与解码

编码

使用 encodeURIComponent 对 URL 参数值编码：

const param = 'hello world';
const encoded = encodeURIComponent(param); // hello%20world

解码

使用 decodeURIComponent 解码：

js实现url

const decoded = decodeURIComponent('hello%20world'); // hello world

动态生成 URL

拼接 URL

const baseUrl = 'https://example.com';
const path = '/api/data';
const query = { id: 123, sort: 'asc' };

const url = new URL(path, baseUrl);
Object.entries(query).forEach(([key, value]) => {
  url.searchParams.set(key, value);
});

console.log(url.href); // https://example.com/api/data?id=123&sort=asc

检查 URL 有效性

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch {
    return false;
  }
}

console.log(isValidUrl('https://example.com')); // true
console.log(isValidUrl('invalid'));            // false

相对路径转绝对路径

const base = 'https://example.com/a/b';
const relative = '../c';

const absoluteUrl = new URL(relative, base).href;
console.log(absoluteUrl); // https://example.com/a/c

以上方法覆盖了 URL 解析、修改、编码解码和动态生成等常见场景。