11

Eu vi um colega convertendo uma string para inteiro usando a sintaxe var a = +"10" porém eu sempre utilizei o parseInt() e a linha fica geralmente assim var a = parseInt("10").

Por que ao colocar o operador + antes de uma string isso acontece? E qual a melhor recomendação: usar o parseInt() ou o operador? Tem alguma influência em performance?

1
  • 2
    O único conselho que posso dar que não está nas respostas é que use o 2º parâmetro do parseInt pra especificar a base da conversão se por algum acaso ou azar você tenha que dar suporte para IE8- Commented 1/10/2018 às 14:33

4 Respostas 4

8

JavaScript possui tipagem fraca, além de tipagem dinâmica. Isto significa que ela faz coerção de tipo para tentar atender o que o programador mandou fazer usando um critério de mais proximidade possível, então se o código tem um operador + mesmo tendo só uma string ele acha que quer uma operação matemática. Só decidiria que quer uma concatenação se tivessem duas strings.

Isto parece uma decisão errada e não muito intuitiva? Sim, por isso as pessoas não gostam de JS, é uma linguagem que tenta ajudar tanto que atrapalha. Tipagem fraca quase sempre é um erro.

Qual a solução para isso? Fazer o seu da melhor forma possível, evitar esses corner cases. Só porque funciona não quer dizer que deveria usar. Todo programador deveria saber disto. Enquanto alguém achar que testar e funcionar significa que está certo haverá código ruins por aí.

Quando quer converter uma string para um número use a função mais correta para isto, e ela é parseInt(). Dá clareza que é isso que deseja, não é um acidente.

Precisa medir (em cada navegador, cada versão) para ver se um dá mais performance que outro, mas não importa e não deve dar, pelo menos nada significativo porque ambos precisarão fazer um algoritmo relativamente complexo para atingir o objetivo, nenhum é miraculosamente simples e o outro muito complicado, em essência fará a mesma coisa.

Eu sou favorável até a linguagem ter um modo strict mais rígido que possa ligar um limitador para este tipo de coisa e obrigar usar o mais certo. Melhor ainda, oficializar TypeScript porque as pessoas estão usando JS para fazer sistemas, uma linguagem de tipagem dinâmica e fraca não funciona mais.

JS Good Partes Vs Definitive Guide

Coloquei no GitHub para referência futura.

2
  • Obrigado Maniero, você esclareceu minhas dúvidas! Commented 1/10/2018 às 15:44
  • 1
    Isso não é corner case, é outro operador.
    – bfavaretto
    Commented 9/10/2018 às 2:12
6

A primeira sintaxe utiliza operador unário +, que converte a variável para Number.

Como sua pergunta é sobre a diferença, utilizando a função parseInt ele também vai converter para Number mas vai truncar qualquer casa decimal que essa variável possua para essa variável se tornar um Number do tipo inteiro.

Então se seu objetivo é transformar uma string num número inteiro a função parseInt é mais segura, mas se você quer apenas converter a string para Number a primeira sintaxe é mais sucinta.

Exemplo:

var numero = "7.5"
console.log(+numero) // 7.5
console.log(parseInt(numero)) // 7

1
  • 1
    Para numeros decimais existe o parseFloat(), só adicionando à sua resposta. Commented 1/10/2018 às 13:38
2

O tipo de dados em uma expressão pode confundir algumas operações de script se os componentes esperados da operação não forem do tipo certo. O JavaScript tenta ao máximo realizar conversões internas para evitar tais problemas, mas ela não pode ler sua mente. Se suas intenções forem diferentes do modo como o JavaScript trata os valores, então não obterá os resultados que esperava.

Um caso particularmente interessnte é a soma de números que podem estar no formato de strings de texto. Em uma instrução aritmética simples, que soma dois numeros, você recebe o resultado esperado:

var soma = 3+3;

console.log(soma);

Mas se um desses números for string, o JavaScript terá a tendencia de converter o outro valor para uma string - transformando a ação do sinal mais de soma aritmética para associação de strings (ou concatenação). Portanto, na instrução 3+"3" a força da string no segundo valor prevalece em relação à operação inteira. O primeiro valor é automaticamente convertido para string, e o resultado associa as duas strings.

var soma = 3+"3";

console.log(soma);

Veja o que acontece quando outro numero é acrescentado à instrução: 3 + 3 + "3"

var soma = 3 + 3 + "3";

console.log(soma);

Há uma lógica por trás desse resultado. A expressão é avaliada da esquerda para a direita. A primeira operação de mais trabalha sobre dois números, gerando o valor 6. Mas, quando o 6 está para ser somado ao "3", o JavaScript permite que a força da string "3" predomine. O 6 é convertido para string e os dois valores são concatenados resultando o 63.

Repare que nesses casos o operador + antes de strings não converteram a string para inteiro!

Se um valor numerico for armazenado como string, seus scripts terão dificuldades para aplicar esse valor a uma operação matemática. A linguagem JavaScript oferece duas funções internas para converter representações de string de numeros em numeros verdadeiros: parsInt() e parseFloat().

CONCLUSÃO

a função correta a ser usada é parseInt()

var soma = 3 + 3 + parseInt("3");

console.log(soma);

2
  • Mas nesse caso, se fosse usar o + para converter, ele não usaria: 3 + 3 + +"3"? Commented 1/10/2018 às 14:36
  • @fernandosavio, quem vai saber se sabem?
    – user60252
    Commented 1/10/2018 às 16:35
2

Complementando as outras respostas: quando a string contém um número inteiro (como '123', '42', etc), não há diferença no resultado. Mas quando a string não é exatamente um número inteiro, os resultados podem ser diferentes. Por exemplo:

['', '     ', '\n', '7.5', '1x', '1.2.3', '3e2', 'xyz'].forEach(s => {
    console.log(`+"${s}" = ${+s} - parseInt("${s}") = ${parseInt(s)}`);
});

Desses, somente a string 'xyz' dá o mesmo resultado para ambos os casos. As demais não:

+"" = 0 - parseInt("") = NaN
+"     " = 0 - parseInt("     ") = NaN
+"
" = 0 - parseInt("
") = NaN
+"7.5" = 7.5 - parseInt("7.5") = 7
+"1x" = NaN - parseInt("1x") = 1
+"1.2.3" = NaN - parseInt("1.2.3") = 1
+"3e2" = 300 - parseInt("3e2") = 3
+"xyz" = NaN - parseInt("xyz") = NaN

Para string vazia, string contendo vários espaços e string contendo quebra de linha (\n), a conversão com + retorna zero, e parseInt retorna NaN.

Para uma string que representa um float, + dá o mesmo resultado de parseFloat e mantém as casas após a vírgula, retornando 7.5. Já parseInt remove as casas decimais e retorna 7.

Para '1x', o + retorna NaN, enquanto parseInt retorna 1. Isso acontece porque segundo a especificação o operador unário +, quando aplicado a strings, usa o algoritmo descrito aqui (que basicamente não reconhece o caractere x e por isso falha e retorna NaN). Já parseInt usa um algoritmo diferente: ele vai lendo os dígitos e quando encontra algo que não é um dígito válido, ignora o restante da string e converte os dígitos que leu até o momento, e por isso o retorno é 1 (similar ao que o PHP faz). O mesmo acontece para '1.2.3', que retorna NaN com o operador +, mas retorna 1 com parseInt.

Já um número em notação científica ('3e2') é reconhecido corretamente por +, que retorna 300. Mas parseInt não reconhece este formato e retorna 3 (pelo motivo já descrito no parágrafo anterior). Nesse caso, você poderia usar parseFloat('3e2'), que retorna 300.

Por fim, para a string 'xyz', ambos retornam NaN.

Vale lembrar também que há algumas situações bizarras que podem ocorrer se você passa números em vez de strings para parseInt:

console.log(parseInt(0.0000005)); // 5
console.log(parseInt(1000000000000000000000)); // 1

// com o "+" isso não ocorre
// obs: os valores ficam corretos, mas a saída estará em notação científica
console.log(+0.0000005); // 5e-7
console.log(+1000000000000000000000); // 1e+21

Achou estranho? A explicação está aqui.


Nesta resposta do SOen tem uma tabela comparativa bem completa, com mais casos e os respectivos resultados para cada conversão. Nesse mesmo link há outras respostas que citam outras diferenças e corner cases.

Testes feitos no Firefox 68.0.2 e Chrome 76.0.3809.132 (ambos para Windows 64 bits).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .