URL参数提取异常：checkin_month返回NaN/null的原因及解决

Hey，我来帮你捋清楚这个问题的来龙去脉——你遇到的坑其实是URL参数分隔符的规范问题，咱们一步步拆解：

首先看你拿到的这个URL字符串：

var url_string = 'https://www.booking.com/searchresults.html?label=gen173nr-1DCAEoggJCAlhYSDNYBGjBAYgBAZgBMcIBCndpbmRvd3MgMTDIAQzYAQPoAQH4AQKSAgF5qAID;sid=2a2d61dc6122c8a17b369733693bc965;checkin_month=5&checkin_monthday=17&checkin_year=2018&checkout_month=6&checkout_monthday=1&checkout_year=2018&class_interval=1&dest_id=-90115&dest_type=city&dtdisc=0&from_sf=1&group_adults=3&group_children=0&inac=0&index_postcard=0&label_click=undef&no_rooms=1&offset=0&postcard=0&raw_dest_type=city&room1=A%2CA%2CA&sb_price_type=total&src=index&src_elem=sb&ss=Ni%C5%A1&ss_all=0&ssb=empty&sshis=0&ssne=Ni%C5%A1&ssne_untouched=Ni%C5%A1&'

你用new URL(url_string)解析后，提取checkin_month返回NaN，后来替换;为?又返回null，直到换成&才找对方向，这背后的原因是：

核心问题：非标准的参数分隔符 #

标准的URL查询参数规则是：用?作为查询部分的起始符，参数之间用&分隔。但这个Booking的URL里，居然混着用了;来分隔部分参数（比如label和sid之间、sid和checkin_month之间）。

而浏览器原生的URLSearchParams只认&作为参数分隔符，;会被当成参数值的一部分。比如原URL里，?后面的第一段会被解析成：

• 参数名：label
• 参数值：gen173nr-1DCAEoggJCAlhYSDNYBGjBAYgBAZgBMcIBCndpbmRvd3MgMTDIAQzYAQPoAQH4AQKSAgF5qAID;sid=2a2d61dc6122c8a17b369733693bc965;checkin_month=5

这就导致checkin_month根本没被当成独立参数，所以url.searchParams.get("checkin_month")会返回null——你说的NaN，应该是后续把这个null转成数字时（比如parseInt(null)）得到的结果。

至于你第一次把;替换成?，这就更糟了：URL里只能有一个?作为查询起始符，后面的?都会被当成参数值的一部分，所以checkin_month还是被埋在前面的参数值里，自然返回null。

正确的解决办法 #

你后来想到把;换成&是完全正确的，这才是符合规范的参数分隔符。只需要把所有;替换成&就行（因为URL路径部分不会有;，全局替换没问题）：

// 修正URL字符串，把所有;换成&
var correctedUrl = url_string.replace(/;/g, '&');
// 再解析修正后的URL
var url = new URL(correctedUrl);
var checkin_month = url.searchParams.get("checkin_month"); // 现在返回"5"
// 如果要转成数字，记得做空值处理
var checkinMonthNum = checkin_month ? Number(checkin_month) : 0;

替换之后，所有参数都用&分隔，URLSearchParams就能正确识别每个参数，checkin_month自然能被提取到。

额外小技巧：兼容两种分隔符 #

如果以后再遇到这种混用&和;的URL，也可以手动解析查询字符串，同时支持两种分隔符：

// 提取?后面的查询部分
const queryPart = url_string.split('?')[1];
const params = {};

// 同时按&和;分割参数对
queryPart.split(/[&;]/).forEach(pair => {
  const [key, value] = pair.split('=');
  if (key) {
    // 解码URL编码的参数值
    params[key] = decodeURIComponent(value || '');
  }
});

var checkin_month = params.checkin_month; // 直接拿到"5"

这种方法不用修改原URL，直接解析，适合处理各种非标准的参数格式。

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