如何清理JavaScript对象中的字符串值？React+Next.js API提交容错

你已经在输入事件里用了.trim()，但要在API环节加兜底容错，推荐两种实用方案，既简化代码又保证数据干净：

方案1：前端封装清洗函数，调用API前统一处理 #

写一个通用工具函数，遍历表单对象的所有字段，自动给字符串类型的字段做首尾去空格，非字符串字段原样保留。不用在每个API调用里重复写trim，一次封装到处用。

// 工具函数：清洗对象中的字符串字段
const trimObjectStrings = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => {
      // 只处理字符串类型，首尾去空格；如果要去除中间多余空格，可改成value.replace(/\s+/g, ' ')
      return [key, typeof value === 'string' ? value.trim() : value];
    })
  );
};

// 使用示例：调用API前处理数据
const submitData = async (rawData) => {
  const cleanedData = trimObjectStrings(rawData);
  // 这里是你的API调用逻辑（比如fetch/axios）
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(cleanedData),
  });
  return res.json();
};

// 测试你的示例数据
const rawData = { 
  email: 'test@testemail.com',
  website: 'http://www.fake.com',
  name: 'Fake Name  '
};
console.log(trimObjectStrings(rawData));
// 输出：{ email: 'test@testemail.com', website: 'http://www.fake.com', name: 'Fake Name' }

方案2：Next.js API路由层兜底处理（更安全） #

前端的处理可能被绕过（比如恶意请求），所以在后端API层再加一道清洗更稳妥。不管前端有没有处理，后端都保证存入数据库的数据是干净的。

App Router 示例（app/api/submit/route.js） #

import { NextResponse } from 'next/server';

// 复用清洗函数
const trimObjectStrings = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, typeof value === 'string' ? value.trim() : value])
  );
};

export async function POST(request) {
  const rawData = await request.json();
  // 清洗数据
  const cleanedData = trimObjectStrings(rawData);
  
  // 这里写你的数据库提交逻辑（比如Prisma/MySQL/PostgreSQL调用）
  // await db.user.create({ data: cleanedData });

  return NextResponse.json({ success: true, data: cleanedData });
}

Pages Router 示例（pages/api/submit.js） #

export default function handler(req, res) {
  if (req.method === 'POST') {
    const rawData = req.body;
    const cleanedData = trimObjectStrings(rawData);
    
    // 数据库提交逻辑
    // await db.user.create({ data: cleanedData });

    res.status(200).json({ success: true, data: cleanedData });
  } else {
    res.status(405).json({ success: false, message: 'Method Not Allowed' });
  }
}

// 清洗函数
const trimObjectStrings = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, typeof value === 'string' ? value.trim() : value])
  );
};

可选：处理中间多余空格 #

如果需要去除字符串中间的多个连续空格（比如用户输入Fake Name变成Fake Name），可以把工具函数里的value.trim()改成：

value.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ')

这段代码先去掉首尾空格，再把中间的多个空格替换成单个空格。

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