Addition JavaScript inhabituelle Vs Comportement de concaténation

Il y a beaucoup de questions additionnelles de concaténation Vs sur internet, mais je ne suis pas sûr de savoir pourquoi je reçois le comportement que je suis. Je ne cherche pas à "ajouter" des chaînes évidentes et j'ai essayé parseInt et parseFloat sur toutes les valeurs en vain. J'ai besoin d'obtenir la valeur d'un attribut data-page qui contiendrait une représentation de valeur numérique (je réalise probablement comme une chaîne implicite). Je remarque que tant que je reçois une valeur de l'attribut data-page, je ne peux pas effectuer d'ajout sur les variables. Si je le remplace par un 1 codé en dur, tout fonctionne bien. Les valeurs doivent toujours être des entiers, mais j'ai essayé parseFloat pour voir si j'avais le même comportement. Ce que j'ai fait.Addition JavaScript inhabituelle Vs Comportement de concaténation

Voici un exemple de code. Supposons $("#pagination").attr('data-page').trim() évalue à 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'

Source

2016-06-29 d.lanza38

Pourriez-vous également publier le code HTML? Vos deux exemples fonctionnent très bien pour moi. –

Je pense que le code ** sans ** le 'parseFloat' et' parseInt' ne fonctionne pas. Cela devrait fonctionner, de toute façon pourquoi vous appelez 'parseFloat' et' parseInt' 2 fois? –

@MarioAlexandroSantini J'appelle parseFloat/parseInt deux fois pour la redondance pour m'assurer que je reçois ce que je pense obtenir. Normalement, je ne le ferais pas dans le code de production. –

Tout fonctionne comme prévu. Voir cette 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>

Votre JS d'origine inchangé .:

//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'

Source

2016-06-29 21:35:46

Vous souhaiterez peut-être réviser cette option pour utiliser la fonction d'extrait de site Web "interne". – JonSG

Après quelques-uns des commentaires et l'assurance JavaScript était correcte, je commencé à chercher d'autres différences entre ma le code existant et les exemples d'extraits publiés. Il s'avère que le problème a à voir avec Smarty - le moteur de template que j'utilise. L'attribut data-page est rempli avec une variable Smarty et lorsque je l'ai éteint avec une valeur codée en dur, l'addition a fonctionné comme prévu.

Qu'est-ce qui ne fonctionne pas:

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

Ce qui fonctionne:

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

Je ne sais pas pourquoi cela pose un problème pour l'instant. Mais c'est certainement ce qui le cause. Si je comprends pourquoi et/ou comment le corriger, je suis sûr de mettre à jour cette réponse.

Source

2016-06-30 12:53:00

Que se passe-t-il si vous essayez quelque chose de fou comme '10000- (9999- (dataPage))'? Mathématiquement, cela devrait sortir exactement comme 'dataPage + 1', mais il n'utilise aucun signe plus. –

Addition JavaScript inhabituelle Vs Comportement de concaténation

Répondre

Questions connexes