页码“2abc”为什么变成2?parseInt 与完整输入校验

简介: 本文探讨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

输入 本例约定
null 第 1 页
"2" 第 2 页
""、"2abc"、"2.9" 格式错误
"02"、"+2"、带首尾空白 格式错误
"1001",最大页为 1000 超出范围

允许的文本为 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 辅助整理官方资料、编写独立示例与绘制示意图,代码经过本地执行验证。

相关文章
|
7天前
|
JavaScript API iOS开发
DeepSeek Harness下载、安装、配置一篇搞定(2026整理,送常用插件)
DeepSeek Harness(DSH)是DeepSeek于2026年开源的MIT协议AI Agent框架,支持插件化组装模型、工具、沙箱与UI,兼容主流大模型。本文提供免Node.js的桌面端安装包(Win/macOS),含详细图文教程及热门插件推荐。
3453 33
|
7天前
|
Linux 开发工具 iOS开发
Codex保姆级教程(下载+安装+登录+使用,含所有版本,2026最新)
Codex是OpenAI推出的开源AI编程智能体,本地运行,可理解整个代码库,支持自然语言指令改代码、执行命令、跑测试、修Bug,兼容Win/macOS/Linux。(239字)
|
2天前
|
云安全 人工智能 安全
|
8天前
|
iOS开发 Docker MacOS
【2026实测】Docker Desktop下载、安装、汉化、配置教程(附官网安装包)
Docker Desktop 是 Docker 官方推出的桌面容器管理工具,集成引擎、CLI、图形界面与 Kubernetes,支持 Win/macOS/Linux。2026 最新版 4.88.1 强化 ARM 原生运行、镜像加速及资源可视化,附中文汉化与国内镜像配置指南。
1534 5
|
云安全 安全 网络安全
|
8天前
|
安全 算法 定位技术
《高性价比人生指南》完整原版:普通人用最少的资源,过好这一生的底层逻辑~How To Live Better
📖《高性价比人生指南》是一份基于实证、拒绝焦虑的生存手册,倡导以“人生时薪”为视角,重新计算时间、金钱与精力的成本与收益。它不承诺逆袭,只教人算清账:省下的钱若耗掉时间便亏;买体验比买物品更值;睡眠是最高杠杆的健康投资;关系贵在情绪价值而非表面热络;学习重在改变行为而非自我安慰。核心理念:用低成本、高回报的微小行动,换取长期的选择权——不是成为谁,而是掌控自己人生的主动权。
|
21天前
|
人工智能 API 开发工具
DeepSeek Harness 神插件:白嫖 13 家大厂模型
`dsh-our-free-model` 是 DeepSeek Harness 神级插件:零配置、零API Key、零账号,聚合13家大厂免费模型(含DeepSeek V4.1 Flash、Kimi K3等),支持本地网关、用量看板与自动降级,真正实现“白嫖即用”。
3699 54
|
13天前
|
人工智能 JSON Linux
【保姆级】ComfyUI部署教程(下载+安装+配置+工作流,2026最新)
ComfyUI 是一款开源节点式AI生成工具,支持图像、视频、音频及3D内容创作。通过拖拽连线组合模型加载、提示词、采样等节点,构建可复用、易修改的工作流,兼容SD1.5、SDXL、Flux、Qwen Image等主流模型。