如何在javascript中强制添加而不是串联[重复]

Posted 2023-02-22

【中文标题】如何在javascript中强制添加而不是串联[重复]

【英文标题】：How to force addition instead of concatenation in javascript [duplicate]

【发布时间】：2012-12-06 21:31:37

【问题描述】：

我正在尝试在我的 javascript 中添加所有卡路里内容，如下所示：

$(function() 
    var data = [];

    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();

    $("#droppable_box").droppable(
        drop: function(event, ui) 
            var currentId = $(ui.draggable).attr('id');
            var total = 0;
            data.push($(ui.draggable).attr('id'));

            if(currentId == "draggable1")
            var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
            
            if(currentId == "draggable2")
            var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
            
            if(currentId == "draggable3")
            var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
            
        if ( typeof myInt1 === 'undefined' || !myInt1 ) 
        myInt1 = parseInt(0);
        
        if ( typeof myInt2 === 'undefined' || !myInt2)
        myInt2 = parseInt(0);
        
        if ( typeof myInt3 === 'undefined' || !myInt3)
        myInt3 = parseInt(0);
        
        total = parseFloat(myInt1 + myInt2 + myInt3);
        $('#response').append(total);
        
    );
    $('#myId').click(function(event) 
        $.post("process.php", ( id: data ), function(return_data, status) 
            alert(data);
            //alert(total);
        );
    );
);

不是添加变量，而是将它们连接起来。我尝试过使用 parseInt、parseFloat 和 Number，但我仍然只是得到连接而不是加法。查看源码请看http://maureenmoore.com/momp_112412/121912_800.html

【参考方案1】：

应该也能做到这一点：

total += eval(myInt1) + eval(myInt2) + eval(myInt3);

这在不同但相似的情况下帮助了我。

【讨论】：

为什么是-1？为我工作。

不要使用 eval - 它是邪恶的！最好使用当前投票最多的答案***.com/a/13953998/283991

中的特定 parseFloat

很大程度上取决于输入。如果您使用它来评估可以具有用户输入的变量，那么它只是“邪恶的”，因为它可以允许诸如 SQL 注入攻击之类的事情，因为它对文本/字符串输入没有任何作用。在上面的代码中到达total 时，各个组件已经应用了parseFloat。总共不需要第二次。

它还会阻止 JIT 编译器进行优化 - 任何使用 eval 都会阻止词法范围的优化，因为引擎假定您可能正在更改范围。 eval 只有在您没有其他选择时才是有效的选择 - 在这种情况下，您可以选择 parseFloat。

就我个人而言，我认为“优化”对运行时的影响可以忽略不计——最多只有几毫秒。但我不会争论这一点。在这种情况下，对我来说，两者都足够好。

【参考方案2】：

以下语句将值附加到id为response的元素

$('#response').append(total);

这看起来像是在连接字符串，但实际上并非如此，您实际上是在将它们附加到元素中

改成

$('#response').text(total);

您需要更改 drop 事件，以便它用总计替换元素的值，您还需要跟踪总计是什么，我建议如下

$(function() 
    var data = [];
    var total = 0;

    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();

    $("#droppable_box").droppable(
        drop: function(event, ui) 
        var currentId = $(ui.draggable).attr('id');
        data.push($(ui.draggable).attr('id'));

        if(currentId == "draggable1")
            var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
        
        if(currentId == "draggable2")
            var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
        
        if(currentId == "draggable3")
            var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
        
        if ( typeof myInt1 === 'undefined' || !myInt1 ) 
            myInt1 = parseInt(0);
        
        if ( typeof myInt2 === 'undefined' || !myInt2)
            myInt2 = parseInt(0);
        
        if ( typeof myInt3 === 'undefined' || !myInt3)
        myInt3 = parseInt(0);
        
        total += parseFloat(myInt1 + myInt2 + myInt3);
        $('#response').text(total);
        
    );

    $('#myId').click(function(event) 
        $.post("process.php", ( id: data ), function(return_data, status) 
            alert(data);
            //alert(total);
        );
    );
);

我将 var total = 0; 语句从 drop 事件中移出，并从此更改了赋值语句

total = parseFloat(myInt1 + myInt2 + myInt3);

到这里

total += parseFloat(myInt1 + myInt2 + myInt3);

这是一个工作示例http://jsfiddle.net/axrwkr/RCzGn/

【参考方案3】：

您的代码连接三个字符串，然后将 结果 转换为数字。

您需要通过在每个变量周围调用parseFloat() 将每个变量 转换为数字。

total = parseFloat(myInt1) + parseFloat(myInt2) + parseFloat(myInt3);

【讨论】：

parseFloat 与旧的一元加号相比有什么好处吗？

@JanDvorak：它使意图更清晰。

感谢我将您的代码添加到maureenmoore.com/momp_112412/121912_800.html，但并没有改善这种情况。

Number 也可以。

我使用Number() 保持清晰。我仍然不明白为什么有时会发生而有时却不会。我有一个项目可以在没有强制的情况下在本地工作，但可以在我的实时服务器上连接。