为何JavaScript数字类型转为字符串？加载更多按钮计数异常

我正在制作一个AJAX生成的列表，有一个「加载更多」按钮，每次点击应将计数器增加8。按钮代码为：

<button data-pointer="8"></button>

执行AJAX调用的JavaScript代码如下：

var pointer = $(this).attr('data-pointer');
sendAjaxRequest(..., pointer, ...);
pointer += 8;
$(this).attr('data-pointer', pointer);

调用正常执行，但pointer值变为88而非预期的16。注：我需要使用attr('data-pointer')而非data('pointer')，因为这似乎是动态设置该属性的唯一方式。我不理解原因，我认为JavaScript是动态类型语言，应将+=8解析为加法得到16。请问我哪里出错了，如何确保变量类型正确？

原因分析 #

$(this).attr('data-pointer')获取到的是字符串类型的值，而非数字。JavaScript中+=运算符在混合字符串与数字时，会优先执行字符串拼接而非算术加法。初始值是字符串"8"，加上数字8后，就变成了字符串拼接的结果"8"+8="88"。

解决方法 #

只需将获取到的字符串转换为数字类型即可，以下是几种常用实现方式：

• 使用parseInt()转换为整数（推荐指定十进制基数）：

  var pointer = parseInt($(this).attr('data-pointer'), 10);
  sendAjaxRequest(..., pointer, ...);
  pointer += 8;
  $(this).attr('data-pointer', pointer);
  

• 使用Number()函数转换：

  var pointer = Number($(this).attr('data-pointer'));
  sendAjaxRequest(..., pointer, ...);
  pointer += 8;
  $(this).attr('data-pointer', pointer);
  

• 用一元加号+快速转换：

  var pointer = +$(this).attr('data-pointer');
  sendAjaxRequest(..., pointer, ...);
  pointer += 8;
  $(this).attr('data-pointer', pointer);
  

注意：使用parseInt时务必加上第二个参数10，明确指定十进制解析规则，避免因字符串前缀导致的八进制解析错误。

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