Ne peut pas additionner deux nombres correctement sans l'aide de parseFloat en JavaScript

Je suis tombé sur ce problème. Il d'ajouter des numéros à l'aide de parseFloat ou parseInt.
SI textbox1 valeur est de 4 et textbox2 valeur est 2, puis je me suis en sortie (voir script)

Mon doute est pourquoi, dans plus seul

parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())

donne de la valeur correcte mais

parseFloat($('#txt1').val() + $('#txt2').val())

n'est pas en donnant la valeur correcte alors que

  • parseFloat($('#txt1').val() - $('#txt2').val()),
  • parseFloat($('#txt1').val() /$('#txt2').val()),
  • parseFloat($('#txt1').val() * $('#txt2').val())

donnent la valeur correcte.
Son simple mais je n'arrivais pas à trouver de solution.

=====jQuery

   function Calculate() {                                              //--> Output
     $('#lbl1').html(parseFloat($('#txt1').val() + $('#txt2').val())); //--> 42
     $('#lbl2').html(parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())); //--> 6
     $('#lbl3').html(parseFloat(4 + 2));                               //--> 6

     $('#lbl4').html(parseFloat($('#txt1').val() - $('#txt2').val())); //--> 2
     $('#lbl5').html(parseFloat($('#txt1').val() * $('#txt2').val())); //--> 8
     $('#lbl6').html(parseFloat($('#txt1').val() / $('#txt2').val())); //--> 2
  }

=====HTML

<table>
        <tr>
            <td>
                <input type="text" id="txt1" />
            </td>
            <td>
                <input type="text" id="txt2" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Calculate"  onclick="Calculate()" />
            </td>
            <td>
                <label id="lbl1">
                </label>
                |
                <label id="lbl2">
                </label>
                |
                <label id="lbl3">
                </label>
                |
                <label id="lbl4">
                </label>
                |
                <label id="lbl5">
                </label>
                |
                <label id="lbl6">
                </label>
            </td>
        </tr>
    </table>
C'est parce que l'opérateur + est également utilisé dans les cordes, tandis que le - et * les opérateurs ne sont pas. Avec des langages à typage comme cela, vous obtenez ce comportement.
Je suis surpris que personne n'a suggéré l'excellent jQuery plugin arithmétique.

OriginalL'auteur Lakshmana Kumar | 2013-04-20

  1. 10

    $.val() renvoie une chaîne de valeur.

    Donc, dans votre premier exemple, vous convertissez les deux chaînes renvoyées à des nombres et le calcul est très bien.

    Si vous utilisez parseFloat($('#txt1').val() + $('#txt2').val()) la + ne fonctionne pas comme l'opérateur arithmétique, mais comme une concaténation de chaîne. Si vous concaténer deux chaînes de caractères et de les convertir par la suite, ce qui donne un résultat erroné.

    Les exemples à l'aide de - de travail, comme il n'y a pas d'opération de chaîne à l'aide de - et par ainsi alls valeurs d'obtenir implicitement converti en un nombre avant l'opération est appliquée.

    OriginalL'auteur Sirko

  2. 1

    $('#txt1').val() + $('#txt2').val() il donne de la Chaîne de valeur

    vous ne pouvez pas utiliser - , * , /opérateur sur les chaînes de

    parseFloat($('#txt1').val()), parseFloat($('#txt2').val()) retourne numéros qui ne sont pas des chaînes de

    OriginalL'auteur PSR