2013-03-15 15 views
14

Quale regola devo seguire per estrarre i numeri dal DOM e dalla caloria con essi? In che modo javascript sa che un valore è un numero o no? Dovrei sempre usare parseInt?Quando utilizzare parseInt

Dato seguente codice:

HTML

<div id="myvalue">5</div> 
<div id="withParseInt"></div> 
<div id="withoutParseInt"></div> 
<div id="withoutParseIntButIncrement"></div> 

JS & jQuery:

var value = $('#myvalue').text(); 
$('#withParseInt').text(parseInt(value) + 1); 
$('#withoutParseInt').text(value + 1); 
$('#withoutParseIntButIncrement').text(value++); 

Dà seguente output:

5 
6 
51 
5 

Fiddle: 012.343.

risposta

12

Il metodo .text() restituirà sempre una stringa. Alcuni operatori, come l'operatore +, sono sovraccarichi per eseguire operazioni aritmetiche e di stringa. Nel caso di stringhe, esegue la concatenazione, quindi il risultato "51".

Se si dispone di una stringa e è necessario utilizzare un operatore non coercing, sarà necessario utilizzare parseInt (o qualche altro metodo di conversione in un numero).

Tuttavia, l'operatore * ad esempio implicity esegue questa coercizione, quindi non è necessaria la chiamata parseInt in tale situazione (vedere ad esempio updated fiddle).

nota che l'incremento ++ operatore non costringere suo operando, ma hai utilizzato l'operatore di postfix in modo che non avrà alcun effetto. Utilizzare l'operatore prefisso e si può vedere di lavoro:

$('#withoutParseIntButIncrement').text(++value); 

Quindi, per riassumere:

// Parses string to number and adds 1 
$('#withParseInt').text(parseInt(value) + 1); 

// Coerces number 1 to string "1" and concatenates 
$('#withoutParseInt').text(value + 1); 

// Implicity coerces string to number, but after it's been inserted into the DOM 
$('#withoutParseIntButIncrement').text(value++); 

// Implicity coerces string to number, before it's been inserted into the DOM 
$('#withoutParseIntButIncrement').text(++value); 

// Implicity coerces to number 
$('#withoutParseIntButMultiply').text(value * 2); 

Nota a margine: è considerata buona pratica di passare sempre il secondo argomento (la radice) a parseInt.Ciò garantisce il numero viene analizzato nella base corretta:

parseInt(value, 10); // For base 10 
+0

Sembra ragionevole. A volte ho avuto alcuni problemi seri quando ho calcolato con il numero estratto da DOM, quindi ho pensato di usare sempre parseInt per gestire il numero. La tua risposta lo conferma. In questo modo sono al sicuro. – iappwebdev

+1

http://stackoverflow.com/questions/11786758/why-parseint08-is-giving-0-whereas-parseint07-is-giving-7?rq=1 Questa domanda spiega anche perché si dovrebbe sempre fornire una base a causa di alcuni strane stranezze del browser sull'analisi degli interi. –

1

Sì, si dovrebbe sempre usare parseInt() o Number() per essere sicuri. In caso contrario Javascript deciderà cosa fare con esso

  • Il valore in sé è una stringa
  • Utilizzando operatore + sarà concatenare due stringhe
  • Utilizzando operatore - calcolerà la differenza numerica
  • ...
7

Uno e unica regola:

Ogni valore che si recupera dal DOM è una stringa.

+4

... e ogni valore si inserisce di nuovo al DOM diventa una stringa. –

1

È sempre bene utilizzare parseInt solo per essere sul sicuro, soprattutto come si può fornire un secondo parametro per il sistema numerico da utilizzare.

Tra l'altro, nel tuo esempio finale dovrebbe essere ++value se si vuole che uguale 6.

Problemi correlati