Javascript/jQuery通过加法给出了奇怪的结果

Javascript/jQuery gives weird result from addition

本文关键字：结果 jQuery Javascript      更新时间：2023-09-26

我刚刚启动javascript和jquery，现在我遇到了这样的问题：

var myCharacter = ('#myCharacter').css('top'); // gives 140px
var numberOnly = myCharacter.replace('px',''); // gives 140
var total = numberOnly + 20; // gives 14020 not 160

我只是不明白为什么会发生这种事。

您需要parseInt()

var total = parseInt(numberOnly) + 20;

因为numberOnly是一个字符串，而不是一个数字，所以它将一个数字添加到一个字符串中，这将导致14020作为字符串

当您在'140px'中替换'px'时，您最终会得到一个字符串类型的变量。（javascript有类型，但它们是动态的）

当您调用"140"+20时，类型不会自动转换，因为+是一个对字符串有意义的操作：串联。

您应该显式地转换为数字，例如使用parseInt（'140'），然后加法应该按预期工作。

由于numberOnly + 20中的一个操作数是字符串，+运算符执行字符串串联，而不是加法。

使用parseInt方法将字符串解析为数字，然后也不必删除px部分，因为解析在遇到非数字字符时结束。

var myCharacter = parseInt(('#myCharacter').css('top'), 10);
var total = myCharacter + 20;

这是因为numberOnly是String，您可以通过执行以下操作将其转换为int

var total = +numberOnly + 20


var myCharacter = ('#myCharacter').css('top'); // gives 140px
var numberOnly = myCharacter.replace('px',''); // gives 140
var total = parseInt(numberOnly) + 20;

您正试图将字符串相加，因此首先将其转换为整数，使用parseInt()执行此操作：

var total = parseInt(numberOnly) + 20;//160

numberOnly仍然是string类型，即它是多个字符。因此，您当前将字符串"140"与20连接，20被隐式转换为字符串。

要解决此问题，请使用[parseInt][1]将numberOnly转换为整数。

相关文章：