Como converter string para number em TypeScript

Neste artigo você vai aprender a como converter string para number em TypeScript, vamos utilizar uma abordagem simples, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre TypeScript!

TypeScript é uma linguagem de programação que, como o nome sugere, é uma extensão do JavaScript que adiciona tipos estáticos opcionais e outras funcionalidades à linguagem.

Uma tarefa comum em qualquer linguagem de programação é converter dados de um tipo para outro, como converter uma string em um número.

Neste artigo, vamos mostrar como converter string para number em TypeScript.

Usando a função Number()

A maneira mais simples de converter uma string em um número em TypeScript é usando a função Number(). Essa função tenta converter o argumento para um número.

Se o argumento não for uma string, ele será convertido implicitamente para uma string antes de ser convertido em um número. Aqui está um exemplo:

const numeroString = "123";
const numero = Number(numeroString);
console.log(typeof numero, numero); // number 123

Neste exemplo, a string “123” é convertida em um número usando a função Number(). O resultado é um número com o valor 123.

Usando o operador de adição (+)

Outra maneira de converter uma string em um número em TypeScript é usando o operador de adição (+).

Esse operador pode ser usado como um atalho para a função Number(). Aqui está um exemplo:

const numeroString = "123";
const numero = +numeroString;
console.log(typeof numero, numero); // number 123

Neste exemplo, a string “123” é convertida em um número usando o operador de adição (+). O resultado é um número com o valor 123.

Verificando se a conversão foi bem sucedida

Em alguns casos, a conversão de uma string em um número pode falhar, como quando a string não representa um número válido.

Por exemplo:

const numeroString = "abc";
const numero = Number(numeroString);
console.log(typeof numero, numero); // number NaN

Neste exemplo, a string “abc” não pode ser convertida em um número, então a função Number() retorna NaN, que significa “Not a Number”.

Para verificar se a conversão foi bem-sucedida, podemos usar a função isNaN(). Essa função retorna true se o valor passado como argumento for NaN e false caso contrário.

Aqui está um exemplo:

const numeroString = "abc";
const numero = Number(numeroString);
if (isNaN(numero)) {
  console.log("A conversão falhou");
} else {
  console.log("A conversão foi bem-sucedida:", numero);
}

Neste exemplo, estamos verificando se a conversão da string “abc” em um número foi bem-sucedida usando a função isNaN().

Como a conversão falhou e a função Number() retornou NaN, a mensagem “A conversão falhou” será impressa na tela.

Convertendo números em diferentes bases

Além de converter strings em números decimais, TypeScript também suporta a conversão de números em diferentes bases, como binário, octal e hexadecimal.

Para fazer isso, podemos usar os prefixos “0b” para binário, “0o” para octal e “0x” para hexadecimal.

Aqui está um exemplo:

const binario = "0b1010";
const octal = "0o17";
const hexadecimal = "0xA";
console.log(Number(binario), Number(octal), Number(hexadecimal)); // 10 15 10

Neste exemplo, estamos convertendo as strings “0b1010”, “0o17” e “0xA” em números binários, octais e hexadecimais, respectivamente, usando a função Number().

Os resultados são os números 10, 15 e 10, que correspondem aos valores em decimal dessas representações.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Conversão de string para number é uma tarefa comum em TypeScript e pode ser realizada de diferentes maneiras, como usando a função Number() ou o operador de adição (+).

É importante verificar se a conversão foi bem-sucedida usando a função isNaN() para evitar erros em sua aplicação.

Além disso, TypeScript também suporta a conversão de números em diferentes bases, como binário, octal e hexadecimal, usando os prefixos adequados.

Com essas informações, é possível converter string para number em TypeScript de forma eficiente e segura em suas aplicações web.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Além do Number() e do +, tu tem duas funções bem úteis pra converter string em número: parseInt() e parseFloat()

O parseInt() lê a string até onde ela ainda representa um número inteiro e ignora o resto, então "123px" vira 123

Já o parseFloat() faz o mesmo, mas mantém a parte decimal, ideal pra valores como "3.14"

const inteiro = parseInt("123px"); const decimal = parseFloat("3.14"); console.log(inteiro, decimal); // 123 3.14

Se liga numa diferença importante: o Number("123px") retorna NaN porque exige que a string inteira seja um número válido, enquanto o parseInt() aproveita só o começo

Ou seja, quando o dado pode vir com sujeira junto (texto, unidade), parseInt() e parseFloat() te salvam

Se tu chegou aqui procurando como fazer isso no Angular, a boa notícia é que quase nada muda

Angular roda em cima do TypeScript, então todos os métodos que vimos aqui (Number(), o operador +, parseInt() e parseFloat()) funcionam do mesmo jeito dentro dos teus componentes

O caso mais comum é quando o valor vem de um input de formulário, que sempre chega como string, aí tu converte na hora de usar:

const valorDoInput = "42"; const idade = Number(valorDoInput); console.log(typeof idade, idade); // number 42

O pulo do gato é lembrar de validar com isNaN() antes de confiar no número, ainda mais quando o dado vem direto do usuário

Qual a diferença entre Number() e parseInt()? O Number() exige que a string inteira seja um número válido, senão devolve NaN. Já o parseInt() lê do começo até onde dá e ignora o resto, então ele converte "123abc" pra 123 numa boa

Como converter uma string com vírgula, tipo "3,14"? Os métodos nativos entendem ponto como separador decimal, não vírgula. Então "3,14" vira NaN. O caminho é trocar a vírgula por ponto antes de converter, com replace(",", "."), e aí passar pro Number() ou parseFloat()

O que fazer quando a conversão retorna NaN? NaN é o sinal de que a string não representava um número válido. Sempre valide o resultado com isNaN() antes de usar, principalmente com dado que veio de input ou de uma API, assim tu não quebra a aplicação lá na frente