如何将JavaScript变量添加至URL？附具体实现需求

嘿，这事儿其实挺简单的，JavaScript有好几种优雅的方式能搞定这个URL拼接需求，我给你列几个常用的方案，按需选择就行：

1. ES6模板字符串（最推荐） #

这是当前最直观、可读性最高的写法，ES6及以上环境都支持：

const baseUrl = "https://apiyouflow.com/";
const v1 = 4;
const v2 = 3;
// 按照你的需求拼接成 /4/4（这里重复使用了v1）
const newUrl = `${baseUrl}${v1}/${v1}`;
console.log(newUrl); // 输出: https://apiyouflow.com/4/4

模板字符串用反引号包裹，变量直接通过${变量名}插入，完全不用担心字符串拼接的引号混乱问题。如果之后你需要改成用v2（比如拼成/4/3），只需要把第二个${v1}换成${v2}就行，非常灵活。

2. 传统字符串拼接（兼容旧环境） #

如果你的项目需要兼容不支持ES6的老环境，用传统的加号拼接也能搞定：

const baseUrl = "https://apiyouflow.com/";
const v1 = 4;
const v2 = 3;
const newUrl = baseUrl + v1 + "/" + v1;
console.log(newUrl);

这种写法虽然能工作，但可读性稍差，变量多的时候容易出错，所以优先推荐模板字符串。

3. 使用URL对象（更健壮的复杂场景） #

如果之后你还要处理URL的其他部分（比如查询参数、哈希值），用原生的URL对象会更靠谱，它能自动处理路径的格式问题：

const baseUrl = new URL("https://apiyouflow.com/");
const v1 = 4;
// 拼接路径部分
baseUrl.pathname += `${v1}/${v1}`;
console.log(baseUrl.href); // 输出: https://apiyouflow.com/4/4

比如如果你的baseUrl最后不小心没加斜杠，URL对象也会自动帮你处理，避免出现https://apiyouflow.com4/4这种错误，非常适合复杂的URL构建场景。

内容的提问来源于stack exchange，提问作者Bashayr Alabdullah