Question

在互联网上有很多额外的Vs连接问题，但我不确定为什么我会得到我的行为。我不想尝试添加＆＃34;显而易见的字符串，我在所有值上尝试parseInt和parseFloat都无济于事。我需要从data-page属性中获取值，该属性将包含数值表示（我可能会将其视为隐式字符串）。我注意到只要我从data-page属性中获取值，我就无法对变量执行添加操作。如果我用硬编码1替换它，一切正常。值应始终为整数，但我尝试parseFloat以查看是否有相同的行为。我做了什么。

下面是一些示例代码。假设$("#pagination").attr('data-page').trim()评估为1。

//Tried parseFloat
//datapage = 1  //This works as expected
dataPage = parseFloat($("#pagination").attr('data-page').trim()); //This does not work as expected
curPage = (parseFloat(dataPage) + parseFloat(1));
console.log(curPage); //Outputs '11' instead of '2'

//Tried parseInt
//datapage = 1  //This works as expected
dataPage = parseInt($("#pagination").attr('data-page').trim());
curPage = (parseInt(dataPage) + parseInt(1));
console.log(curPage); //Outputs '11' instead of '2'

Answer 1

一切都按预期工作。请参阅此codepen：http://codepen.io/anon/pen/zBwOPW

HTML：

<body>
  <input id="pagination" data-page="1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>

原来的JS没有变化。：

//Tried parseFloat
//datapage = 1  //This works as expected
dataPage = parseFloat($("#pagination").attr('data-page').trim()); //This does not work as expected
curPage = (parseFloat(dataPage) + parseFloat(1));
console.log(curPage); //Outputs '11' instead of '2'

//Tried parseInt
//datapage = 1  //This works as expected
dataPage = parseInt($("#pagination").attr('data-page').trim());
curPage = (parseInt(dataPage) + parseInt(1));
console.log(curPage); //Outputs '11' instead of '2'

Answer 2

在一些评论和保证JavaScript正确之后，我开始研究现有代码与发布的示例代码段之间的其他差异。事实证明这个问题与Smarty有关 - 我正在使用的模板引擎。 data-page属性填充了Smarty变量，当我用硬编码值将其切换出来时，添加按预期工作。

什么不起作用：

<div id="pagination" class="col-xs-12 col-md-5 paginationBar" data-page="{$paginationPage}" data-pageMax="{$paginationPageMax}" data-pageQty="{$paginationQty}">...<div>

什么有效：

<div id="pagination" class="col-xs-12 col-md-5 paginationBar" data-page="1" data-pageMax="1000" data-pageQty="10">...<div>

我不确定为什么这会引发一个问题。但这肯定是造成它的原因。如果我找出原因和/或如何纠正它，我一定会更新这个答案。

不寻常的JavaScript添加Vs连接行为

2 个答案: