URL 对象的使用及注意

前言

URL对象常用需求：

1. 解析和操作 URL
2. URL地址拼接
3. URL校验和验证

解析和操作 URL

const urlString = 'https://www.example.com/path?param1=value1&param2=value2#section';

// 创建 URL 对象
try {
    const url = new URL(urlString);

    // 获取 URL 的各个组成部分
    console.log(url.protocol); // https:
    console.log(url.hostname); // www.example.com
    console.log(url.pathname); // /path
    console.log(url.search); // ?param1=value1&param2=value2
    console.log(url.hash); // #section

    // 获取和修改查询参数
    console.log(url.searchParams.get('param1')); // value1
    url.searchParams.set('param1', 'newvalue');
    console.log(url.href); // https://www.example.com/path?param1=newvalue&param2=value2#section
} catch {
    console.log('TypeError')
}

URL地址拼接

const baseURL = 'https://api.example.com'
const endpoint = '/users'
const queryParameters = {
  page: 1,
  limit: 10
};

// 创建基准 URL 对象
try {
    const baseURLObj = new URL(baseURL)

    // 拼接路径
    const url = new URL(endpoint, baseURLObj)

    // 添加查询参数
    for (const [key, value] of Object.entries(queryParameters)) {
      url.searchParams.append(key, value)
    }
    console.log(url.href)// https://api.example.com/users?page=1&limit=10
}catch {
    console.log('TypeError')
}

url.searchParams.append和url.searchParams.set都可以修改url地址的参数，区别在于当已经存在一个参数时，append会直接拼接新的参数在后面，而set会修改原来参数的value值

URL校验和验证

可以使用 new URL(url)来进行判断变量url是否是一个正确的url格式

let urlBool
try {
    new URL('www.baidu.com')
    urlBool = true
} catch 
    urlBool = false
}
console.log(urlBool) // false

使用注意事项

使用 new URL时，最好搭配try-catch使用，因为当传入的url不符合url的格式时，会抛出TypeError的异常，会阻止代码的运行，所以需要搭配try-catch使用；