添加两个数字将它们连接起来而不是计算总和

IT技术 javascript html
2021-02-07 21:03:58

我正在添加两个数字，但我没有得到正确的值。

例如，执行1 + 2返回 12 而不是 3

我在这段代码中做错了什么？

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}
<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>

6个回答

它们实际上是字符串，而不是数字。从字符串生成数字的最简单方法是在它前面加上+：

var x = +y + +z;
上面的代码有点奇怪，会让经验不足的开发人员感到困惑。代码也会因为混淆使用“+”而导致 JSLint 失败。
2021-03-19 21:03:58
我不鼓励任何人使用此快捷方式。我知道实际上将字符串解析为数字需要更多代码，但至少代码清楚地符合意图。
2021-03-21 21:03:58
@phresnel：一元+运算符
2021-03-23 21:03:58
出于好奇（我自己不是 JavaScript 程序员）（我认为这会改进答案），+-prefix 对字符串有什么作用？
2021-03-27 21:03:58
@AKTed：实际上我想激怒 elclanrs在他的回答中稍微描述一下。当然，我自己也不是无法进行谷歌搜索；但它会（imo）提高答案的质量，特别是因为使用前缀+进行字符串转换在其他编程语言中非常罕见，并且可能会使新手感到困惑。（不过，感谢分享链接）
2021-03-27 21:03:58

我只是使用Number()： 

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5
我一直在犯这个错误，它总是连续的： var k += Number(i)
2021-03-27 21:03:58

您需要使用 javaScript 的parseInt()方法将字符串转回数字。现在它们是字符串，所以添加两个字符串将它们连接起来，这就是为什么你得到“12”。

@Yoshi - 是的，是的，它可以，但鉴于答案实际上并没有说任何parseInt()只返回整数的地方，并且没有解释任何parseInt()“怪癖” - 这可能是用户输入数据的问题 - 我认为值得一提。（我实际上并没有拒绝投票或其他任何事情。）
2021-03-12 21:03:58
parseInt()鉴于 OP 的功能是添加两个用户输入的“数字”，而不是两个“整数”，我不确定这里是最佳选择。
2021-03-23 21:03:58
是的，我已经假设输入将是整数，因为他们给出了一个 1 + 2 的例子，但你是对的 - parseFloat() 如果它们只是任何“数字”可能会更好。
2021-03-30 21:03:58
@nnnnnn 我认为，如果parseFloatOP 提供更多输入，可以很容易地对其进行修改。
2021-04-02 21:03:58

使用parseInt(...)但请确保指定一个基数值；否则你会遇到几个错误（如果字符串以“0”开头，基数是八进制/8等）。

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);

alert(x + y);

希望这可以帮助！

这在 ES6 中不再是问题。可以安全地省略基数。parseInt("012")工作正常，返回 12。当然，你仍然需要小心像[1,2].map(parseInt).
2021-04-02 21:03:58
除非他期待浮点值，否则我认为使用这种方法仍然很有效。
2021-04-03 21:03:58
parseInt()鉴于 OP 的功能是添加两个用户输入的“数字”，而不是两个“整数”，我不确定这里是最佳选择。
2021-04-07 21:03:58

以下内容在一般情况下可能有用。

  • 首先，HTML 表单字段仅限于text。这尤其适用于文本框，即使您已经煞费苦心地确保该值看起来像一个数字。

  • 其次，无论好坏，JavaScript 都重载了+具有两种含义的运算符：添加数字和连接字符串。它偏好连接，因此即使是像这样的表达式3+'4'也会被视为连接。

  • 第三，如果可以，并且需要的话，JavaScript 将尝试动态更改类型。例如，'2'*'3'将两种类型都更改为数字，因为您不能将字符串相乘。如果其中之一不兼容，您将得到NaN, Not a Number。

出现您的问题是因为来自表单的数据被视为字符串，+因此将连接而不是添加。

从表单中读取所谓的数字数据时，您应该始终将其推送到parseInt()或parseFloat()，具体取决于您想要整数还是小数。

请注意，这两个函数都没有真正将字符串转换为数字。相反，它会从左到右解析字符串，直到它得到一个无效的数字字符或最后，并转换已被接受的内容。在 的情况下parseFloat，这包括一位小数点，但不包括两位。

有效数字之后的任何内容都会被忽略。如果字符串甚至不是以数字开头，它们都会失败。然后你会得到NaN。

来自表单的数字的一个很好的通用技术是这样的：

var data=parseInt(form.elements['data'].value); //  or parseFloat

如果您准备将无效字符串合并为 0，则可以使用：

var data=parseInt(form.elements['data'].value) || 0;
其它你可能感兴趣的问题
上一篇直接与委托 - jQuery .on() 下一篇为什么在 HTML 中使用 onClick() 是不好的做法？