JavaScript中的运算操作陷阱

最新推荐文章于 2025-07-26 14:11:14 发布

原创最新推荐文章于 2025-07-26 14:11:14 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #分页

Programming Language 同时被 2 个专栏收录

14 篇文章

订阅专栏

Frontend Development

7 篇文章

订阅专栏

本文详细阐述了在使用JSP进行网站开发时遇到的分页功能实现问题，特别是当尝试通过HTML元素的html()方法获取字符串并进行数值运算时，由于类型不匹配导致的错误。通过案例分析，作者揭示了字符串连接而非数值运算的原因，并提供了修正方案，最终通过将表达式的顺序调整来避免类型冲突，确保了下一页按钮功能的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做JSP大作业，需要写一个网站，其中用到了分页系统，就自己撸了一个。

其中的翻页逻辑是这样写的：

/*上一页*/
previousPage.click(function(){ 
    clickPage(grids[currentActivePos].find('a').html() - 1);
});
/*下一页*/
nextPage.click(function() { 
    clickPage(grids[currentActivePos].find('a').html() + 1);
});

扔到网页里实验，发现[上一页]功能没有问题，但是点击[下一页]之后没有反应，下边还有一个类似的错误：

grids[i].find('a').html(index + i - 3);

当测试时，index是从.html()方法获取的字面值为3的参数，i是循环控制变量，当i也是3时，出现了gridsp[i]的值变成30而不是3的情况。

一直想不明白这奇怪的现象是因为什么，但问题肯定就出在这句话上，所以就试着把表达式的顺序变了一下，像这样：

grids[i].find('a').html(i - 3 + index);

发现结果变成了03，到这里才明白这结果不是数值而是字符串！也就是index是string类型的，直接用数字和它进行+操作结果不是进行数值运算而是字符串连接！

因而也明白了翻页逻辑的错误在哪里。改动如下：

/*上一页*/
previousPage.click(function(){
    clickPage(grids[currentActivePos].find('a').html() - 1);
});
/*下一页*/
nextPage.click(function() { 
    var des = eval(grids[currentActivePos].find('a').html() + '+ i');
    clickPage(des);
});

/*先进行减法运算，把表达式结果转换成数值类型*/
grids[i].find('a').html(index - 3 + i);

总结：非常傻的一个错误，找到原因之后觉得自己非常基础的东西没有掌握牢固。这一段时间虽然涉及的面不少，但是都没有什么深入，这样就有点像”非科班”的CS学生了，应该警醒。