如何将URL参数转换为对象且不改变值的类型？

URLSearchParams解析出来的所有参数值默认都是字符串类型，要将指定字段转为整数类型，可以通过以下两种方式处理：

方法一：手动转换指定字段 #

拿到参数对象后，直接对目标字段做类型转换：

const url = 'key=hhdfghh&num=123';
const params = Object.fromEntries(new URLSearchParams(url));
// 将num转换为整数，第二个参数10表示十进制
params.num = parseInt(params.num, 10);
console.log(params); // { key: 'hhdfghh', num: 123 }
console.log(typeof params.num); // 'number'

如果需要避免非数字字符串转为NaN，可以增加校验：

params.num = /^\d+$/.test(params.num) ? parseInt(params.num, 10) : params.num;

方法二：通用转换函数（自动识别数字） #

如果有多个数字类型参数，可写一个批量处理函数：

function parseUrlParams(url) {
  const params = Object.fromEntries(new URLSearchParams(url));
  for (const key in params) {
    // 判断是否为有效数字字符串，转成对应数字类型
    const value = params[key];
    if (!isNaN(value) && !isNaN(parseFloat(value))) {
      params[key] = Number(value);
    }
  }
  return params;
}

const url = 'key=hhdfghh&num=123&price=45.6';
const params = parseUrlParams(url);
console.log(params); // { key: 'hhdfghh', num: 123, price: 45.6 }
console.log(typeof params.num); // 'number'

注意：Number()会把空字符串转为0，parseInt会忽略非数字开头的字符串，可根据实际需求选择转换方式。

内容的提问来源于stack exchange，提问作者play fact gaming