Cómo convertir números a cadenas en JavaScript: Guía completa con ejemplos

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

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

1. Introducción

JavaScript es un lenguaje de programación de importancia crítica en el desarrollo web. En particular, la conversión de tipos desempeña un papel clave en muchos escenarios, como la validación de entradas de formularios y el formateo de respuestas de API.
En este artículo ofrecemos una explicación detallada de cómo convertir números a cadenas en JavaScript, cubriendo desde el uso básico hasta técnicas avanzadas.

Al leer este artículo, incluso los principiantes podrán comprender cómo convertir números en cadenas y aplicar estas técnicas de manera eficaz en el desarrollo del mundo real.

2. Métodos básicos para convertir números a cadenas en JavaScript

JavaScript proporciona múltiples formas de convertir números en cadenas. En esta sección explicamos tres de los métodos más utilizados.

2.1 Uso de la función String()

La forma más sencilla de convertir un número en una cadena es mediante la función incorporada String().

Ejemplo de uso

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

Explicación

• Simplemente escribiendo String(number), el valor numérico se convierte en una cadena.
• El número original no se modifica; en su lugar, se devuelve un nuevo valor de tipo cadena.

Ventajas y consideraciones

• El código es simple y altamente legible.
• El tipo de dato queda garantizado explícitamente, reduciendo la probabilidad de errores.
• Sin embargo, no permite recortar espacios en blanco ni aplicar un formato especial.

2.2 Uso del método toString()

El método toString() es un método incorporado de los objetos numéricos de JavaScript y permite conversiones más flexibles.

Ejemplo de uso

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

Explicación

• Al ser un método del objeto número, puede llamarse directamente sobre valores numéricos.
• También admite la conversión a diferentes sistemas numéricos, como binario o hexadecimal.

Ejemplo con especificación de radix

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

Ventajas y consideraciones

• Al especificar un radix, puedes convertir números en cadenas cambiando el sistema numérico.
• Se producirá un error si el valor es undefined o null, por lo que es necesario realizar una verificación de tipo con antelación.

2.3 Uso de plantillas de cadena (Template Literals)

En JavaScript moderno, las plantillas de cadena (comillas invertidas) ofrecen una forma sencilla e intuitiva de convertir números en cadenas.

Ejemplo de uso

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

Explicación

• Las plantillas de cadena permiten una conversión de cadena intuitiva.
• Se pueden combinar fácilmente con otras cadenas, lo que posibilita un formateo flexible.

Ventajas y consideraciones

• La sintaxis es simple y visualmente fácil de entender.
• Soporta formateo complejo, incluidas expresiones.
• Las plantillas de cadena están soportadas a partir de ES6, por lo que se debe tener precaución con navegadores más antiguos.

3. Temas avanzados: Conversión y formateo de valores numéricos especiales

En esta sección exploramos técnicas avanzadas para convertir números a cadenas en JavaScript. En particular, el manejo de valores decimales y la especificación de formatos de salida son requerimientos frecuentes en escenarios de desarrollo del mundo real.

3.1 Manejo de decimales y especificación de formato

Al convertir números que incluyen puntos decimales a cadenas, puedes usar métodos que permiten controlar el formato de visualización.

1. Uso del método toFixed()

El método toFixed() genera una cadena especificando la cantidad de dígitos después del punto decimal.

Ejemplo de uso

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

Explicación

• El valor se redondea al número de decimales indicado como argumento.
• El valor devuelto es una cadena, por lo que no se requiere una conversión adicional.

Ventajas y consideraciones

• Los valores pueden redondearse más de lo esperado, por lo que puede ser necesario un manejo adicional cuando la precisión es crítica.
• Si no se especifica ningún argumento, el valor predeterminado es cero decimales.

Ejemplo Práctico: Visualización de Moneda

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

2. Uso del Método toPrecision()

El método toPrecision() genera una cadena especificando el número total de dígitos significativos.

Ejemplo de Uso

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

Explicación

• Al especificar el número de dígitos significativos, se aplica el redondeo y el formateo simultáneamente.

Ventajas y Consideraciones

• El resultado puede mostrarse en notación exponencial, lo que lo hace inadecuado cuando se requiere un formato fijo.

3.2 Conversión a Formatos de Moneda y Porcentaje

Al mostrar datos, a menudo es necesario formatear valores como moneda o porcentajes.

1. Formateo de Moneda con Intl.NumberFormat

El objeto Intl.NumberFormat permite formatear números como moneda de manera sencilla.

Ejemplo 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"

Explicación

• Al especificar la configuración regional y el código de moneda, el número se formatea correctamente de forma automática.
• Los separadores de miles se aplican automáticamente, eliminando la necesidad de procesamiento manual.

Ejemplo Práctico: Formateo 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. Conversión a Formato de Porcentaje

El siguiente ejemplo demuestra cómo formatear números como porcentajes de manera sencilla.

Ejemplo de Uso

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

Explicación

• Los valores decimales se convierten a notación de porcentaje, con control sobre los decimales.

4. Consideraciones Importantes y Manejo de Errores al Convertir Números y Cadenas

Aunque JavaScript facilita la conversión entre números y cadenas, pueden ocurrir errores o comportamientos no deseados en ciertos casos. Esta sección presenta consideraciones clave y ejemplos prácticos de manejo de errores.

4.1 Detección y Manejo de NaN (Not a Number)

En JavaScript, NaN (Not a Number) ocurre cuando fallan operaciones numéricas o conversiones. Revisemos cómo detectarlo y manejarlo correctamente.

1. Detección Básica de NaN

Ejemplo: Generación de NaN

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

Como se muestra arriba, las operaciones entre cadenas y números son inválidas, lo que resulta en NaN.

Ejemplo: Uso de isNaN()

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

2. Uso de Number.isNaN()

En ES6, se introdujo Number.isNaN() para una detección más precisa.

Ejemplo: Detección Estricta

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

Puntos Clave

• isNaN() realiza coerción de tipos, lo que puede llevar a resultados inesperados.
• Number.isNaN() no realiza coerción de tipos, lo que lo hace más confiable.

4.2 Técnicas para Prevenir Errores de Conversión de Tipos

1. Ejemplo de Verificación Segura de Tipos

Para prevenir errores inesperados causados por la mezcla de números y cadenas, puedes realizar verificaciones de tipos de antemano.

Ejemplo: Verificación del Tipo Antes del Procesamiento

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Invalid input value");
}

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;

// Convert safely
let str = value !== null && value !== undefined ? String(value) : "Default value";
console.log(str); // "Default value"

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?

Pregunta:
Una cadena fue tratada erróneamente como un número, causando un error. ¿Cómo puedo prevenir conversiones incorrectas?

Respuesta:
Valide los datos de entrada con antelación y confirme que son numéricos antes de la conversión.

Ejemplo: Combinando Validación y Conversión

let input = "abc"; // User input

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

Puntos Clave:

• La combinación de validación de entrada con manejo de errores ayuda a prevenir el procesamiento de datos inválidos.
• Se requiere precaución extra al manejar la entrada del usuario.

5.5 ¿Cómo puedo mantener la precisión de punto flotante?

Pregunta:
Quiero resolver el problema donde 0.1 + 0.2 resulta en 0.30000000000000004.

Respuesta:
Dado que la aritmética de punto flotante introduce errores de precisión, use aritmética de enteros o formato de decimales fijos.

Ejemplo 1: Usando Aritmética de Enteros

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

Ejemplo 2: Corrigiendo Lugares Decimales

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

Puntos Clave:

• Los cálculos de punto flotante pueden producir errores, por lo que son necesarias medidas preventivas.
• Separar los datos de cálculo de los datos de visualización mejora la seguridad y la precisión.

6. Resumen y Recursos Relacionados

Este artículo proporcionó una explicación exhaustiva sobre cómo convertir números a cadenas en JavaScript, cubriendo métodos básicos, técnicas avanzadas, consideraciones importantes y preguntas frecuentes. Revisemos los puntos clave.

6.1 Resumen de Puntos Clave

1. Métodos de Conversión Básicos

• Función String() : Simple y amigable para principiantes.
• Método toString() : Flexible, soporta conversión de radix y sistemas numéricos.
• Literales de Plantilla : Sintaxis moderna que ofrece claridad y facilidad de uso.

2. Formato Avanzado y Control de Visualización

• toFixed() : Controla el número de lugares decimales.
• Intl.NumberFormat : Simplifica el formato de moneda y porcentaje.

3. Manejo de Errores y Mejores Prácticas

• Detección de NaN : Use isNaN() y Number.isNaN() para prevenir errores.
• Conversión Segura de Tipos : Valide los tipos de datos antes del procesamiento.
• Manejo de Precisión de Punto Flotante : Use aritmética de enteros o control de decimales fijos.

4. Resolución de Problemas Basada en Preguntas Frecuentes

• Soluciones prácticas para errores de entrada y problemas de formato.
• Ejemplos de código del mundo real para fortalecer las habilidades de resolución de problemas.

6.2 Casos de Uso Prácticos

Las técnicas introducidas en este artículo se pueden aplicar en los siguientes escenarios:

• Visualizaciones de Precios en Comercio Electrónico : Mejore la legibilidad usando formato de moneda.
• Herramientas de Visualización de Datos : Formatee valores numéricos con unidades o porcentajes.
• Validación de Entrada de Formularios : Valide y procese de manera segura la entrada del usuario.
• Registro y Depuración : Convierta valores numéricos a cadenas para una salida clara.

6.3 Enlaces y Referencias Relacionadas

Para aquellos que deseen profundizar o consultar la documentación oficial, se recomiendan los siguientes recursos:

• Objeto String de JavaScript MDN Web Docs – String
• Guía Detallada de toFixed() y Formato de Números MDN Web Docs – Number.toFixed()
• Usando Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Notas Finales

Convertir números a cadenas en JavaScript es una habilidad fundamental utilizada en toda las aplicaciones web.

Habilidades Adquiridas de Este Artículo:

• Comprender técnicas básicas de conversión de tipos.
• Formatear datos numéricos de manera apropiada para diferentes contextos.
• Escribir código estable y resistente a errores.

Use estas técnicas para construir aplicaciones web prácticas y confiables.

Notas adicionales y aprendizaje futuro

Para mejorar aún más tus habilidades en JavaScript, considera aprender conversiones inversas de cadenas a números y técnicas más avanzadas de manipulación de tipos de datos. Estos temas se tratarán en futuros artículos—¡mantente atento!