Como Converter Números em Strings no JavaScript: Guia Completo com Exemplos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma linguagem de programação de importância crítica no desenvolvimento web. Em particular, a conversão de tipos desempenha um papel fundamental em muitos cenários, como validar a entrada de formulários e formatar respostas de APIs.
Neste artigo, fornecemos uma explicação detalhada de como converter números em strings em JavaScript, cobrindo tudo, desde o uso básico até técnicas avançadas.

Ao ler este artigo, até mesmo iniciantes serão capazes de entender como converter números em strings e aplicar essas técnicas de forma eficaz no desenvolvimento do mundo real.

2. Métodos Básicos para Converter Números em Strings em JavaScript

JavaScript oferece múltiplas maneiras de converter números em strings. Nesta seção, explicamos três dos métodos mais comumente usados.

2.1 Usando a Função String()

A forma mais simples de converter um número em uma string é usando a função interna String().

Exemplo de Uso

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Explicação

• Ao simplesmente escrever String(number), o valor numérico é convertido em uma string.
• O número original não é modificado; em vez disso, um novo valor de string é retornado.

Vantagens e Considerações

• O código é simples e altamente legível.
• O tipo de dado é explicitamente garantido, reduzindo a probabilidade de erros.
• No entanto, não oferece suporte a remoção de espaços em branco ou aplicação de formatação especial.

2.2 Usando o Método toString()

O método toString() é um método interno dos objetos numéricos do JavaScript e permite conversões mais flexíveis.

Exemplo de Uso

let num = 456;
let str = num.toString();
console.log(str); // "456"

Explicação

• Por ser um método do objeto número, pode ser chamado diretamente sobre valores numéricos.
• Também suporta conversão para diferentes sistemas numéricos, como binário ou hexadecimal.

Exemplo com Especificação de Base

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

Vantagens e Considerações

• Ao especificar uma base (radix), você pode converter números em strings alterando o sistema numérico.
• Um erro ocorrerá se o valor for undefined ou null, portanto a verificação de tipo é necessária antecipadamente.

2.3 Usando Template Literals

No JavaScript moderno, template literals (crases) fornecem uma forma simples e intuitiva de converter números em strings.

Exemplo de Uso

let num = 789;
let str = `${num}`;
console.log(str); // "789"

Explicação

• Template literals permitem conversão de string de forma intuitiva.
• Eles podem ser combinados facilmente com outras strings, possibilitando formatação flexível.

Vantagens e Considerações

• A sintaxe é simples e visualmente fácil de entender.
• Suporta formatação complexa, incluindo expressões.
• Template literals são suportados a partir do ES6, portanto é preciso cautela em navegadores mais antigos.

3. Tópicos Avançados: Conversão e Formatação de Valores Numéricos Especiais

Nesta seção, exploramos técnicas avançadas para converter números em strings em JavaScript. Em particular, o tratamento de valores decimais e a especificação de formatos de saída são frequentemente necessários em cenários de desenvolvimento do mundo real.

3.1 Tratamento de Decimais e Especificação de Formato

Ao converter números que incluem pontos decimais em strings, você pode usar métodos que permitem controlar o formato de exibição.

1. Usando o Método toFixed()

O método toFixed() gera uma string especificando o número de dígitos após o ponto decimal.

Exemplo de Uso

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Explicação

• O valor é arredondado ao número de casas decimais especificado como argumento.
• O valor retornado é uma string, portanto nenhuma conversão adicional é necessária.

Vantagens e Considerações

• Os valores podem ser arredondados mais do que o esperado, portanto pode ser necessário tratamento adicional quando a precisão for crítica.
• Se nenhum argumento for especificado, o padrão é zero casas decimais.

Exemplo Prático: Exibição de Moeda

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. Usando o Método toPrecision()

O método toPrecision() gera uma string especificando o número total de dígitos significativos.

Exemplo de Uso

let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

Explicação

• Ao especificar o número de dígitos significativos, o arredondamento e a formatação são aplicados simultaneamente.

Vantagens e Considerações

• O resultado pode ser exibido em notação exponencial, tornando‑o inadequado quando um formato fixo é necessário.

3.2 Convertendo para Formatos de Moeda e Percentual

Ao exibir dados, costuma ser necessário formatar valores como moeda ou percentuais.

1. Formatação de Moeda com Intl.NumberFormat

O objeto Intl.NumberFormat permite formatar números facilmente como moeda.

Exemplo de Uso

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Explicação

• Ao especificar a localidade e o código da moeda, o número é formatado automaticamente de forma correta.
• Separadores de milhar são aplicados automaticamente, eliminando a necessidade de processamento manual.

Exemplo Prático: Formatação como USD

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. Convertendo para Formato Percentual

O exemplo a seguir demonstra como formatar números facilmente como percentuais.

Exemplo de Uso

let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

Explicação

• Valores decimais são convertidos para notação percentual, com controle sobre as casas decimais.

4. Considerações Importantes e Tratamento de Erros ao Converter Números e Strings

Embora o JavaScript facilite a conversão entre números e strings, erros ou comportamentos inesperados podem ocorrer em certos casos. Esta seção apresenta considerações chave e exemplos práticos de tratamento de erros.

4.1 Detectando e Tratando NaN (Not a Number)

Em JavaScript, NaN (Not a Number) ocorre quando operações ou conversões numéricas falham. Vamos revisar como detectá‑lo e tratá‑lo adequadamente.

1. Detecção Básica de NaN

Exemplo: Gerando NaN

let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

Como mostrado acima, operações entre strings e números são inválidas, resultando em NaN.

Exemplo: Usando isNaN()

let value = "abc" * 2;
console.log(isNaN(value)); // true

2. Usando Number.isNaN()

No ES6, Number.isNaN() foi introduzido para detecção mais precisa.

Exemplo: Detecção Estrita

console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

Pontos Principais

• isNaN() realiza coerção de tipo, o que pode levar a resultados inesperados.
• Number.isNaN() não realiza coerção de tipo, tornando‑o mais confiável.

4.2 Técnicas para Prevenir Erros de Conversão de Tipo

1. Exemplo de Verificação Segura de Tipo

Para evitar erros inesperados causados pela mistura de números e strings, você pode realizar verificações de tipo antecipadamente.

Exemplo: Verificando o Tipo Antes do Processamento

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Valor de entrada inválido");
}

Explanation

• By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value

function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

• By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Method 2: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

• Floating-point arithmetic can introduce errors, so countermeasures are necessary.
• For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

• The typeof operator returns the type of a variable as a string.
• To check whether a value is a number, use typeof num === “number” .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Converter de forma segura
let str = value !== null && value !== undefined ? String(value) : "Valor padrão";
console.log(str); // "Valor padrão"

Key Points:

• Checking for value existence in advance helps prevent errors.
• Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

• Select the appropriate method to control numeric display formats.
• International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

Pergunta:
Uma string foi tratada erroneamente como número, causando um erro. Como posso impedir conversões incorretas?

Resposta:
Valide os dados de entrada antecipadamente e confirme que são numéricos antes da conversão.

Exemplo: Combinando Validação e Conversão

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

Pontos Principais:

• Combinar validação de entrada com tratamento de erros ajuda a impedir o processamento de dados inválidos.
• É necessário ter cautela extra ao lidar com a entrada do usuário.

5.5 Como posso manter a precisão de ponto flutuante?

Pergunta:
Quero resolver o problema em que 0.1 + 0.2 resulta em 0.30000000000000004.

Resposta:
Como a aritmética de ponto flutuante introduz erros de precisão, use aritmética inteira ou formatação decimal fixa.

Exemplo 1: Usando Aritmética Inteira

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Exemplo 2: Corrigindo Casas Decimais

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Pontos Principais:

• Cálculos de ponto flutuante podem gerar erros, portanto são necessárias medidas preventivas.
• Separar os dados de cálculo dos dados de exibição melhora a segurança e a precisão.

6. Resumo e Recursos Relacionados

Este artigo forneceu uma explicação abrangente de como converter números em strings no JavaScript, abordando métodos básicos, técnicas avançadas, considerações importantes e FAQs. Vamos revisar os principais aprendizados.

6.1 Resumo dos Pontos Principais

1. Métodos Básicos de Conversão

• Função String() : Simples e amigável para iniciantes.
• Método toString() : Flexível, suporta conversão de radix e sistemas numéricos.
• Template Literals : Sintaxe moderna que oferece clareza e facilidade de uso.

2. Formatação Avançada e Controle de Exibição

• toFixed() : Controla o número de casas decimais.
• Intl.NumberFormat : Simplifica a formatação de moeda e porcentagem.

3. Tratamento de Erros e Melhores Práticas

• Detecção de NaN : Use isNaN() e Number.isNaN() para prevenir erros.
• Conversão Segura de Tipo : Valide os tipos de dados antes de processar.
• Manipulação de Precisão de Ponto Flutuante : Use aritmética inteira ou controle decimal fixo.

4. Solução de Problemas Baseada em FAQ

• Soluções práticas para erros de entrada e problemas de formatação.
• Exemplos de código do mundo real para aprimorar habilidades de solução de problemas.

6.2 Casos de Uso Práticos

As técnicas apresentadas neste artigo podem ser aplicadas nos seguintes cenários:

• Exibição de Preços em E‑commerce : Melhore a legibilidade usando formatação de moeda.
• Ferramentas de Visualização de Dados : Formate valores numéricos com unidades ou porcentagens.
• Validação de Entrada de Formulário : Valide e processe com segurança a entrada do usuário.
• Registro e Depuração : Converta valores numéricos para strings para uma saída clara.

6.3 Links Relacionados e Referências

Para quem deseja aprofundar ou consultar a documentação oficial, os recursos a seguir são recomendados:

• Objeto String do JavaScript MDN Web Docs – String
• Guia Detalhado sobre toFixed() e Formatação de Números MDN Web Docs – Number.toFixed()
• Usando Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Notas Finais

Converter números em strings no JavaScript é uma habilidade fundamental usada em todo tipo de aplicação web.

Habilidades Adquiridas com Este Artigo:

• Compreender técnicas básicas de conversão de tipos.
• Formatar dados numéricos adequadamente para diferentes contextos.
• Escrever código estável e resistente a erros.

Use essas técnicas para construir aplicações web práticas e confiáveis.

Notas Adicionais e Aprendizado Futuro

Para melhorar ainda mais suas habilidades em JavaScript, considere aprender conversões reversas de strings para números e técnicas mais avançadas de manipulação de tipos de dados. Esses tópicos serão abordados em artigos futuros—fique atento!