Comment ajouter deux chaînes comme s'il s'agissait de nombres?


176

J'ai deux chaînes qui ne contiennent que des nombres:

var num1 = '20',
    num2 = '30.5';

Je me serais attendu à ce que je puisse les additionner, mais ils sont concaténés à la place:

num1 + num2; // = '2030.5'

Comment puis-je forcer ces chaînes à être traitées comme des nombres?

Réponses:


378

J'utiliserais l'opérateur unaire plus pour les convertir d'abord en nombres.

+num1 + +num2;

9
Très cool. Merci d'avoir partagé ça. J'ai trouvé cet article qui décrit l'opérateur unaire plus et certains des effets utiles qu'il a sur différents types de données. xkr.us/articles/javascript/unary-add
mrtsherman

4
Mais si ces nombres sont plus grands que 2 ^ 53, vous devrez créer une fonction pour ajouter des parties des chaînes et reporter le report à chaque partie d'une boucle. : D
trusktr

2
Cela m'a donné une erreur, j'ai donc utilisé parseFloat () à la place.
Hawkee

1
Voir aussi la réponse de @NicholasCarey ci-dessous: stackoverflow.com/a/8976770/1579667
Benj

Y a-t-il un moyen moins piraté de faire cela? (Avertissement: c'est comme ça que j'ai toujours fait.)
seebiscuit

20

Documents MDN pour parseInt Documents
MDN pour parseFloat

Dans parseInt, radix est spécifié comme dix pour que nous soyons en base 10. En javascript non strict, un nombre précédé de 0est traité comme octal. Cela poserait évidemment des problèmes!

parseInt(num1, 10) + parseInt(num2, 10) //base10
parseFloat(num1) + parseFloat(num2)

Voir également la réponse de ChaosPandion pour un raccourci utile utilisant un opérateur unaire . J'ai mis en place un violon pour montrer les différents comportements.

http://jsfiddle.net/EtX6G/

var ten = '10';
var zero_ten = '010';
var one = '1';
var body = document.getElementsByTagName('body')[0];

Append(parseInt(ten) + parseInt(one));
Append(parseInt(zero_ten) + parseInt(one));
Append(+ten + +one);
Append(+zero_ten + +one);

function Append(text) {
    body.appendChild(document.createTextNode(text));
    body.appendChild(document.createElement('br'));
}

2
utilisez parseFloat () si vous avez des décimales. :)
Diodeus - James MacFarlane

1
De plus, vous devriez vraiment spécifier la racine comme 10.
ChaosPandion

Et +num1 + +num2est plus court, sans doute plus élégant. Fondamentalement, l' +opérateur unaire se convertit enNumber
Raynos

Ne perdez-vous pas la décimale .5 lorsque vous parseInt?
DOK

Pour ce que ça vaut, parseInt et parseFloat sont expérimentaux et ne sont pas largement pris en charge sur tous les navigateurs - presque pas de support sur mobile.
Volonté

14

Je recommanderais d'utiliser l'opérateur unaire plus, pour forcer une chaîne éventuelle à être traitée comme un nombre, entre parenthèses pour rendre le code plus lisible comme suit:

(+varname)

Donc, dans votre cas c'est:

var num1 = '20',
    num2 = '30.5';

var sum = (+num1) + (+num2);

// Just to test it
console.log( sum ); // 50.5



6

Si vous devez ajouter deux chaînes ensemble qui sont de très grands nombres, vous devrez évaluer l'addition à chaque position de chaîne:

function addStrings(str1, str2){
  str1a = str1.split('').reverse();
  str2a = str2.split('').reverse();
  let output = '';
  let longer = Math.max(str1.length, str2.length);
  let carry = false;
  for (let i = 0; i < longer; i++) {
    let result
    if (str1a[i] && str2a[i]) {
      result = parseInt(str1a[i]) + parseInt(str2a[i]);

    } else if (str1a[i] && !str2a[i]) {
      result = parseInt(str1a[i]);

    } else if (!str1a[i] && str2a[i]) {
      result = parseInt(str2a[i]);
    }

    if (carry) {
        result += 1;
        carry = false;
    }
    if(result >= 10) {
      carry = true;
      output += result.toString()[1];
    }else {
      output += result.toString();
    }
  }
  output = output.split('').reverse().join('');

  if(carry) {
    output = '1' + output;
  }
  return output;
}


4

essayer

var x = parseFloat(num1) + parseFloat(num2) ;

ou, selon vos besoins:

var x = parseInt(num1) + parseInt(num2) ;

http://www.javascripter.net/faq/convert2.htm

Vous voudrez peut-être prendre le livre Javascript: The Good Parts , de Douglas Crockford. Javascript a une collection assez importante de pièges! Ce livre contribue grandement à les clarifier. Voir également

et l'excellent essai de M. Crockford, Javascript: Le langage de programmation le plus incompris au monde .


3

J'ai toujours juste soustrait zéro.

num1-0 + num2-0;

Certes, la méthode d'opérateur unaire est un caractère de moins, mais tout le monde ne sait pas ce qu'est un opérateur unaire ou comment chercher sur Google pour savoir quand ils ne savent pas comment il s'appelle.


2

Si vous souhaitez effectuer une opération avec des nombres sous forme de chaînes (comme dans le cas où les nombres sont plus grands que 64 bits peuvent contenir), vous pouvez utiliser la bibliothèque de grands entiers .

const bigInt = require('big-integer')
bigInt("999").add("1").toString() // output: "1000"

2

Ici, vous avez deux options pour le faire: -

1.Vous pouvez utiliser le plus unaire pour convertir un numéro de chaîne en entier.

Vous pouvez également y parvenir en analysant le nombre en type correspondant. ie parseInt (), parseFloat () etc.

.

Maintenant, je vais vous montrer ici à l'aide d'exemples (Trouvez la somme de deux nombres).

Utilisation de l'opérateur unaire plus

<!DOCTYPE html>
<html>
<body>

<H1>Program for sum of two numbers.</H1>
<p id="myId"></p>
<script>
var x = prompt("Please enter the first number.");//prompt will always return string value
var y = prompt("Please enter the second nubmer.");
var z = +x + +y;    
document.getElementById("myId").innerHTML ="Sum of "+x+" and "+y+" is "+z;
</script>
</body>
</html>

Utilisation de l'approche d'analyse

<!DOCTYPE html>
<html>
<body>

<H1>Program for sum of two numbers.</H1>
<p id="myId"></p>
<script>
var x = prompt("Please enter the first number.");
var y = prompt("Please enter the second number.");   
var z = parseInt(x) + parseInt(y);
document.getElementById("myId").innerHTML ="Sum of "+x+" and "+y+" is "+z;
</script>
</body>
</html>

2
function sum(){
    var x,y,z;
    x = Number(document.getElementById("input1").value);
    y = Number(document.getElementById("input2").value);
    z = x + y;
    document.getElementById("result").innerHTML = z ;
}

1

Vous pouvez utiliser parseIntpour analyser une chaîne en un nombre. Pour être prudent, passez toujours 10comme deuxième argument à analyser en base 10.

num1 = parseInt(num1, 10);
num2 = parseInt(num2, 10);
alert(num1 + num2);

1

Assurez-vous d'arrondir votre réponse finale à moins de 16 décimales pour les flottants car le script java est bogué.

Par exemple 5 - 7,6 = -2,5999999999999996


1
JavaScript n'est pas bogué, il utilise la même virgule flottante IEEE754 que la plupart des autres. L'imprécision que vous avez notée est une conséquence naturelle de l'utilisation de l'arithmétique binaire à virgule flottante sur les nombres que vous spécifiez et affichez en décimal.
Michael Geary

1

@ cr05s19xx a suggéré une question en double:

JavaScript est un peu drôle quand il s'agit de nombres et d'addition.

Donner ce qui suit

«20» - «30» = 10; // renvoie 10 sous forme de nombre '20' + '30' = '2030'; // Les renvoie sous forme de chaîne Les valeurs renvoyées par document.getElementById sont des chaînes, il est donc préférable de les analyser toutes (même celle qui fonctionne) en nombre, avant de procéder à l'addition ou à la soustraction. Votre code peut être:

function myFunction() {
  var per = parseInt(document.getElementById('input1').value);
  var num = parseInt(document.getElementById('input2').value);
  var sum = (num / 100) * per;
  var output = num - sum;

  console.log(output);

  document.getElementById('demo').innerHTML = output;
}

function myFunction2() {
  var per = parseInt(document.getElementById('input3').value);
  var num = parseInt(document.getElementById('input4').value);
  var sum = (num / 100) * per;
  var output = sum + num;

  console.log(output);

  document.getElementById('demo1').innerHTML = output;
}

0

Utilisez la parseFloatméthode pour analyser les chaînes en nombres à virgule flottante:

parseFloat(num1) + parseFloat(num2)

0

J'utilise ceci dans mon projet J'utilise le signe + pour traiter la chaîne comme un nombre (dans la variable with_interesst)

<script>
function computeLoan(){
var amount = document.getElementById('amount').value;
var interest_rate = document.getElementById('interest_rate').value;
var days = document.getElementById('days').value;
var interest = (amount * (interest_rate * .01)) / days;
var payment = ((amount / days) + interest).toFixed(2);
var with_interest = (amount * (interest_rate * .01));
var with_interesst = (+amount * (interest_rate * .01)) + (+amount);
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('payment').innerHTML = "Target Daily = PHP"+payment;
document.getElementById('with_interesst').innerHTML = "Amount w/Interest =   PHP"+with_interesst;
}
</script>

<div name="printchatbox" id="printchatbox">
 <form id="Calculate" class="form-horizontal">
   <h2>You Can Use This Calculator Before Submit </h2>
   <p>Loan Amount: PHP<input id="amount" type="number" min="1" max="1000000"  onchange="computeLoan()"></p>
   <p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()">%</p>
    <p>Term<select id="days" type="number" min="1" max="72" step=".1" onchange="computeLoan()">
    <option value="40">40 Days</option>
    <option value="50">50 Days</option>
    <option value="60">60 Days</option>
    <option value="70">70 Days</option>
    <option value="80">80 Days</option>
    <option value="90">90 Days</option>
    <option value="100">100 Days</option>
    <option value="120">120 Days</option>
    </select>
    </p>                        
   <h2 id="payment"></h2>
   <h2 id ="with_interesst"></h2>
 </form>
</div>

J'espère que ça aide


0
document.getElementById(currentInputChoosen).value -= +-100;

Fonctionne dans mon cas, si vous rencontrez le même problème que moi et que vous ne trouvez pas de solution pour ce cas et trouvez cette question SO.

Désolé pour un peu hors sujet, mais comme je viens de découvrir que cela fonctionne, j'ai pensé que cela pourrait valoir la peine d'être partagé.

Je ne sais pas si c'est une solution de contournement sale ou vraiment légitime.


-1

Vous pouvez utiliser comme ceci:

var num1 = '20',
    num2 = '30.5';

alert((num1*1) + (num2*1)); //result 50.5

Lorsque vous appliquez * 1 dans num1, convertissez la chaîne en un nombre.

si num1 contient une lettre ou une virgule, renvoie NaN multiplié par 1

si num1 est nul, num1 renvoie 0

sincères amitiés!!!


-2

Essayez ceci si vous recherchez un code Javascript simple et souhaitez utiliser deux zones de saisie et ajouter des nombres à partir des deux valeurs. Voici le code.

    Enter the first number: <input type="text" id="num1" /><br />
    Enter the seccond number: <input type="text" id="num2" /><br />
    <input type="button" onclick="call()" value="Add"/>

    <script type="text/javascript">
    function call(){
    var q=parseInt(document.getElementById("num1").value);
    var w=parseInt(document.getElementById("num2").value);
    var result=q+w;
    }
    </script>

pour plus de détails, veuillez visiter http://informativejavascript.blogspot.nl/2012/12/javascript-basics.html

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.