在Express.js中使用bodyParser.urlencoded()解析GET请求查询字符串数字

嘿，我来帮你解决这个问题！首先得纠正一个小误区：你配置的body-parser.urlencoded中间件是用来处理POST请求的表单请求体的，和GET请求的查询字符串（也就是req.query）完全没关系哦！Express本身会自动解析查询字符串，但默认只会把所有参数都转成字符串，这就是为什么你看到foo变成了'123'而不是数字类型。

下面给你几种可行的解决方案：

方案1：手动转换单个参数（适合参数少的场景） #

如果你的接口参数不多，直接在接口逻辑里手动转换类型就很简单：

app.get('/api', (req, res) => {
  // 手动转换foo为数字，同时处理无效数字的情况
  const foo = !isNaN(Number(req.query.foo)) ? Number(req.query.foo) : 0; // 0可以换成你需要的默认值
  const bar = req.query.bar; // bar保持字符串类型
  
  const parsedQuery = { foo, bar };
  console.log(parsedQuery); // 输出 { foo: 123, bar: '123' }
  console.log(typeof parsedQuery.foo); // 输出 'number'
  
  res.send('处理完成');
});

方案2：用中间件自动转换全局查询参数（适合多接口场景） #

如果你的项目里很多接口都需要处理参数类型转换，写一个全局中间件会更高效，这里有两种方式：

方式A：使用现成的query-string库 #

这个库专门用来处理查询字符串，支持自动转换数字、布尔值，还能解析嵌套结构和数组。首先安装依赖：

npm install query-string

然后在你的Express入口文件里添加中间件：

const queryString = require('query-string');

// 全局中间件：替换默认的req.query解析结果
app.use((req, res, next) => {
  // 从URL中提取查询字符串部分
  const queryPart = req.url.split('?')[1];
  if (queryPart) {
    // parseNumbers设为true，自动转换数字；parseBooleans可选，自动转换布尔值
    req.query = queryString.parse(queryPart, {
      parseNumbers: true,
      parseBooleans: true
    });
  }
  next();
});

// 现在接口里直接用req.query就可以了
app.get('/api', (req, res) => {
  console.log(req.query); // 输出 { foo: 123, bar: '123' }
  console.log(typeof req.query.foo); // 输出 'number'
  res.send('ok');
});

方式B：自己写轻量转换中间件（无需额外依赖） #

如果不想加新依赖，可以自己写一个简单的中间件，只转换看起来是数字的参数：

app.use((req, res, next) => {
  // 遍历所有查询参数
  Object.keys(req.query).forEach(key => {
    const value = req.query[key];
    // 用正则判断是否是合法的数字字符串（支持整数和小数）
    if (/^\d+(\.\d+)?$/.test(value)) {
      req.query[key] = Number(value);
    }
  });
  next();
});

// 接口中直接使用req.query
app.get('/api', (req, res) => {
  console.log(req.query); // { foo: 123, bar: '123' }
  res.send('处理完成');
});

这个正则会匹配像'123'、'123.45'这样的数字字符串，而'123abc'、''这类无效数字会保持原字符串类型。

最后再提一句：如果前端需要传数组或者嵌套对象（比如{ arr: [1,2,3] }），Express默认的解析会把它变成arr[]=1&arr[]=2&arr[]=3，这种复杂结构推荐用query-string库来解析，它能正确还原成数组或对象结构。

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