頁碼「2abc」為何變成 2？parseInt 與完整輸入驗證

2026-11-06 6

版权

版权声明：

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文探讨URL分页参数解析陷阱：`parseInt("2abc",10)`静默返回2，易掩盖输入错误。提出严格校验方案——先用正则`/^[1-9][0-9]{0,5}$/`验证完整字符串格式，再转数字并校验范围，区分null（默认第1页）、空值/非法格式（报错）与越界情况，确保分页健壮可靠。（239字）

列表地址带着 ?page=2abc，代码用 parseInt(raw, 10) 读取页码，最后请求了第 2 页。输入里的 abc 被跳过，页面也没有说明这次地址有误。若再用 parseInt(raw, 10) || 1 设置默认值，一些错误输入还会悄悄变成第 1 页。

本文用合成的分页参数研究这个问题，给出一份可直接运行的字符串校验示例。

解析到整数，还需要确认剩余字符

console.log(parseInt("2abc", 10));
console.log(parseInt("2.9", 10));
console.log(parseInt("2e3", 10));
console.log(Number(""));

四个输出依次为 2、2、2、0。parseInt 遇到当前进制无法继续解释的字符时，会返回已经解析的部分。指定十进制可以明确基数，完整输入是否符合页码格式仍由调用方检查。MDN parseInt

Number 的转换规则不同，空字符串会得到 0，指数形式也可以转换为数值。选择转换函数时，应先明确输入格式。对于页码框中的空文本，直接转换会丢掉“用户还没有输入”的信息。MDN Number 转换规则

把默认值、格式与范围分别写清楚

本例处理 URLSearchParams.get 得到的单个值。缺少 page 参数会得到 null，此时采用第 1 页。参数存在但内容为空时，返回格式错误。get 返回首个同名参数，重复 page 的处理规则应在读取入口另行确定。MDN URLSearchParams.get

允许的文本为 1～6 位 ASCII 十进制数字，第一位为 1～9。这个长度与默认最大页数 1000 是示例政策，接入时应结合列表规模确定。

先确认完整文本，再进行数值转换

function readPage(raw, maxPage = 1000) {
   
  if (!Number.isInteger(maxPage) || maxPage < 1 || maxPage > 999999) {
   
    throw new RangeError("maxPage must be from 1 to 999999");
  }
  if (raw === null) {
   
    return {
    ok: true, page: 1 };
  }
  if (typeof raw !== "string") {
   
    return {
    ok: false, reason: "type" };
  }
  if (!/^[1-9][0-9]{0,5}$/u.test(raw) || raw.trim() !== raw) {
   
    return {
    ok: false, reason: "format" };
  }

  const page = Number(raw);
  if (page > maxPage) {
   
    return {
    ok: false, reason: "range" };
  }
  return {
    ok: true, page };
}

console.log(readPage(null));
console.log(readPage("2abc"));

这里用 trim 的结果比较原文，拒绝首尾空白并保留输入原意。正则与这一比较共同要求整段输入符合契约，也覆盖末尾换行。通过最多六位数字的检查后，Number 转换得到的整数处于明确的小范围内。

调用方收到错误时，可以显示反馈并保留原文本，等用户修改后再发起请求。把格式错误默认成第 1 页会让请求成功掩盖输入问题，因此示例只在参数缺失时采用默认值。

函数返回的新对象给出结果，页面可以据此决定是否更新当前页。最大页配置错误会抛出异常，便于发现调用代码中的问题。页面输入错误则返回原因，供交互层显示。

用边界样本核对请求前的决定

本轮在 Node.js 中原样运行两段正文代码，检查空参数、正常页码、最大页边界、部分数字、科学计数法、符号、前导零、全角数字、换行和非字符串输入。另检查真实 URLSearchParams 的缺失值、空值与常规值，再用 1～1000 的连续输入核对返回页码。

这些检查验证字符串契约和纯函数。实际接入时，还需要核对页面如何呈现错误、何时发请求，以及服务端返回的页数是否发生变化。翻页过程中新增或删除数据会改变实际可用页数，服务端仍需验证请求范围，客户端再按最新结果处理。

创作说明：本文由 AI 辅助整理官方资料、编写独立示例与绘制示意图，代码经过本地执行验证。