URL构造器

摘要

在前端开发中，我们经常需要处理URL，例如在发起HTTP请求时构建API端点，或在页面导航时构建动态链接、拼接动态参数。过去，我们习惯于使用模板语法和字符串拼接来构建这些URL，现在在代码中依然可以看到新的代码还在使用这种方法。但这种方法不仅容易出错，而且在维护和阅读代码时也不够直观。本文将介绍更现代和更安全的URL构建方法，并展示如何在实际项目中应用它们。

字符串拼接或模板语法

javascript 复制代码

const baseUrl = "https://api.example.com";
const userId = 12345;
const endpoint = baseUrl + "/users/" + userId + "/details";
console.log(endpoint); // "https://api.example.com/users/12345/details"

javascript 复制代码

import { TYPE_EDIT } from '@/constants/type.ts'
const type = TYPE_EDIT
const url = 'https://api.example.com/userInfo'
const newUrl = url + '?type=' + type + '&model=1&share=1&fromModule=wechat'
console.log(urlUrl) // https://api.example.com/userInfo?type=TYPE_EDIT&model=1&share=1&fromModule=wechat

ES6模板字符串

javascript 复制代码

const baseUrl = "https://api.example.com";
const userId = 12345;
const endpoint = `${baseUrl}/users/${userId}/details`;
console.log(endpoint); // "https://api.example.com/users/12345/details"

javascript 复制代码

import { TYPE_EDIT } from '@/constants/type.ts'
const type = TYPE_EDIT
const url = 'https://api.example.com/userInfo'
const newUrl = url + `?type=${type}&model=1&share=1&fromModule=wechat`
console.log(urlUrl) // https://api.example.com/userInfo?type=TYPE_EDIT&model=1&share=1&fromModule=wechat

存在几个问题：

易读性差：当URL变得复杂时，拼接和模板字符串会变得难以阅读和维护（现阶段已经难以阅读和维护了）。
错误处理麻烦：拼接过程中如果有任何错误（例如漏掉斜杠），可能会导致难以排查的BUG。
缺乏类型安全：拼接字符串无法提供编译时的类型检查，容易引入错误。

基本用法

javascript 复制代码

const baseUrl = "https://api.example.com";
const userId = 12345;
const url = new URL(`/users/${userId}/details`, baseUrl);
console.log(url.href); // "https://api.example.com/users/12345/details"

添加查询参数

URL构造器还提供了一种简便的方法来添加和操作查询参数：

javascript 复制代码

const baseUrl = "https://api.example.com";
const userId = 12345;

const url = new URL(`/users/${userId}/details`, baseUrl);
url.searchParams.append('type', 'EDIT');
url.searchParams.append('module', 'wechat');
console.log(url.href); // "https://api.example.com/users/12345/details?type=EDIT&module=wechat"

拼接数组参数

javascript 复制代码

const baseUrl = 'https://example.com';
const url = new URL(baseUrl);

const arrayParam = ['value1', 'value2', 'value3'];
// 将数组转换为逗号分隔的字符串
url.searchParams.set('array', arrayParam.join(','));

console.log(url.toString()); // https://example.com/?array=value1,value2,value3

解析数组参数

javascript 复制代码

const urlString = 'https://example.com/?array=value1,value2,value3';
const url = new URL(urlString);

const arrayParamString = url.searchParams.get('array');
// 将逗号分隔的字符串转换回数组
const arrayParam = arrayParamString ? arrayParamString.split(',') : [];

console.log(arrayParam); // ['value1', 'value2', 'value3']

完整示例

javascript 复制代码

// 拼接数组参数到URL
const baseUrl = 'https://example.com';
const url = new URL(baseUrl);

const arrayParam = ['value1', 'value2', 'value3'];
url.searchParams.set('array', arrayParam.join(','));

console.log(url.toString()); // https://example.com/?array=value1,value2,value3

// 解析数组参数从URL
const urlString = url.toString();
const parsedUrl = new URL(urlString);

const arrayParamString = parsedUrl.searchParams.get('array');
const parsedArrayParam = arrayParamString ? arrayParamString.split(',') : [];

console.log(parsedArrayParam); // ['value1', 'value2', 'value3']

总结

以上简单的介绍了一种方法处理来拼接url，欢迎大家一起讨论！