Ir al contenido
wannacode

Entrada y salida

En resumen: La entrada es el texto que el programa lee desde el teclado: en este curso se lee con ask(), y Number() lo convierte en número para que puedas hacer cálculos.

Problema

El programa solo conoce un nombre

El programa saluda al cliente por su nombre:

const name = "María";
console.log("¡Hola, " + name + "!");
Salida
¡Hola, María!

Funciona, pero saluda a todos como María. El nombre está escrito en el código. Para cada cliente nuevo tienes que cambiar el programa y ejecutarlo otra vez. Quieres que el programa pregunte por sí mismo.

La idea

Leer desde el teclado

Cuando el programa lee, se detiene y espera. La persona escribe y pulsa Enter. Lo que escribe es la entrada del programa.

greet.js
import { createInterface } from "node:readline";


const rl = createInterface({ input: process.stdin });
const lines = rl[Symbol.asyncIterator]();
async function ask(question) {
  process.stdout.write(question);
  return (await lines.next()).value;
}


const name = await ask("¿Cómo te llamas? ");
console.log("¡Hola, " + name + "!");
rl.close();
Entrada
María
Salida
¿Cómo te llamas? ¡Hola, María!

JavaScript no tiene una orden corta y lista para leer desde el teclado. Por eso, arriba hay unas líneas que crean un ayudante: ask. ask("¿Cómo te llamas? ") imprime la pregunta, espera a que la persona escriba una línea y pulse Enter, y te da lo que escribió. await delante significa «espera la respuesta». rl.close(); al final cierra la lectura cuando el programa ya no va a leer más.

Qué significan import, async, function y await lo verás más adelante. Las funciones están en el módulo «Funciones». Por ahora, copia estas líneas al principio de todo programa que lee. Más adelante, en las lecciones, no las mostramos, solo las líneas que van después.

Aquí la entrada y la salida se muestran por separado. En la consola, el nombre aparece donde lo escribes: después de «¿Cómo te llamas? ». ask imprime la pregunta con process.stdout.write, sin salto de línea: la respuesta queda en la misma línea.

Más precisamente, para curiosos
  • ask("") con las comillas vacías solo lee, sin pregunta.
  • Si la entrada se ha terminado (no hay más líneas), ask da undefined, «sin valor».
  • readline también tiene rl.question(), que verás en ejemplos en internet. Cuando la entrada viene de un archivo, pierde líneas, por eso aquí no lo usamos.

Problema

12 + 30 = 1230

El cajero introduce dos pagos, 12 € y 30 €. El programa tiene que mostrar el total:

const first = await ask("");
const second = await ask("");
const total = first + second;
console.log("Total: " + total + " €");
rl.close();
Entrada
12
30
Salida
Total: 1230 €

En lugar de 42 salió 1230. El programa no se equivocó en la cuenta. No hizo ninguna cuenta.

Aquí no hay pregunta: ask("") solo lee una línea.

La idea

De texto a número

Escriba lo que escriba la persona, ask() devuelve texto. "12" y "30" son dos textos, y + entre textos los pega. Para hacer cálculos, convierte el texto en número:

const first = Number(await ask(""));
const second = Number(await ask(""));
const total = first + second;
console.log("Total: " + total + " €");
rl.close();
Entrada
12
30
Salida
Total: 42 €

Convertir texto en un valor de otro tipo se llama parsear (en inglés, parsing).

  • Number(...) da un número, entero o decimal: en JavaScript son un solo tipo.
  • También existen parseInt(...) y parseFloat(...). Leen las cifras del principio del texto y se detienen en el primer carácter distinto: parseInt("12 €") es 12.

La suma de aquí es el primer cálculo del curso. La resta, la multiplicación y la división llegan en la próxima lección.

const first = Number(await ask(""));
const second = Number(await ask(""));
const total = first + second;
console.log("Total: " + total + " €");
rl.close();
Paso a paso, en palabras
  1. La persona escribe 12 y Enter. await ask("") devuelve el texto «12», no un número.
  2. Number convierte el texto en el número 12. Va a first.
  3. 30 sigue el mismo camino: texto, conversión, un número en second.
  4. Ahora + suma números: 12 + 30 = 42.
  5. Se imprime «Total: 42 €».
Más precisamente, para curiosos
  • Si el texto no es un número (por ejemplo, "doce"), JavaScript no se detiene. Number da NaN (Not a Number, «no es un número»), y un cálculo con NaN vuelve a dar NaN. Una línea vacía da 0. Los espacios alrededor no importan: Number(" 12 ") es 12.
console.log(Number(" 12 "));
console.log(Number("3.5"));
console.log(Number("doce"));
console.log(Number("3,5"));
console.log(Number(""));
console.log(Number("doce") + 1);
Salida
12
3.5
NaN
NaN
0
NaN
  • Number siempre quiere un punto, sea cual sea la configuración de la computadora: Number("3,5") es NaN.

Pruébalo

¿Cuántas entradas?

El programa lee cuántos adultos y cuántos niños hay.

Entrada
2
3

¿Qué imprimirá el programa?

const adults = Number(await ask(""));
const children = Number(await ask(""));
console.log("Entradas: " + adults + children);
rl.close();
Respuesta

La idea

Los números como tú quieres

En la lección anterior, el precio 49.90 salió como 49.9. Para un precio siempre quieres dos cifras después del punto decimal. Esto es la salida con formato:

const product = "Auriculares";
const price = 49.9;
const qty = 2;
console.log(`${product}: ${price.toFixed(2)} €`);
console.log(`${qty} uds. en el carrito`);
const label = `Precio: ${price.toFixed(2)} €`;
console.log(label);
Salida
Auriculares: 49.90 €
2 uds. en el carrito
Precio: 49.90 €

El texto entre comillas invertidas, `, es una plantilla literal (template literal): escribes los valores directamente dentro, en ${…}. Esto se llama interpolación de cadenas.

price.toFixed(2) da el número como texto con exactamente 2 cifras después del punto. toFixed(0) no tiene cifras después del punto, toFixed(3) tiene tres.

El valor de la variable no cambia. El formato solo decide cómo se ve al imprimirlo.

Más precisamente, para curiosos
  • Separador de miles y alineación en columnas:
const total = 1234.5;
console.log("Total: " + total.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €");
console.log("Café".padEnd(10) + "|" + (2.5).toFixed(2).padStart(8));
console.log("Portátil".padEnd(10) + "|" + (1299.0).toFixed(2).padStart(8));
Salida
Total: 1,234.50 €
Café      |    2.50
Portátil  | 1299.00

toLocaleString("en-US", …) escribe el número según las reglas del inglés de Estados Unidos, con separador de miles. padEnd(10) rellena el texto con espacios a la derecha hasta 10 caracteres, y padStart(8) a la izquierda hasta 8.

  • toFixed no sigue la configuración regional: el punto sigue siendo un punto en cualquier computadora. Si quieres una coma decimal, como se escribe en España y en gran parte de Europa, ponla tú:
const price = 49.9;
console.log("Precio: " + price.toFixed(2).replace(".", ",") + " €");
Salida
Precio: 49,90 €

Pruébalo

Dos cifras

Una noche en el hotel cuesta 65.5 €. Quieres que salga «Por noche: 65.50 €». ¿Qué va en el espacio en blanco?

console.log(`Por noche: ${price.} €`);

Pruébalo

Encuentra el error

Ya hay 12 entradas reservadas, y el programa suma tantas como introduzcas. Con la entrada 4 imprime «Reservadas: 124». ¿En qué línea está el error?

Elige la línea con el error.

Ejercicio

Programas que preguntan

Resuelve las tareas en tu editor. La entrada es una línea por cada valor. No imprimas preguntas como «Introduce un nombre:», para que tu salida coincida con el ejemplo: escribe ask("").

1. Saludo por nombre. Lee un nombre y saluda a la persona.

Entrada
María
Salida
¡Hola, María!

2. Suma de dos números. Lee dos números enteros e imprime la cuenta.

Entrada
17
25
Salida
17 + 25 = 42

3. Dos textos en uno. Lee dos textos e imprímelos juntos, con un espacio entre ellos.

Entrada
Buenos
Aires
Salida
Buenos Aires

4. π con dos cifras. Guarda π en una variable como 3.14159265358979 e imprímelo con dos cifras después del punto. El valor ya listo Math.PI llega en la próxima lección.

Salida
3.14

Más tareas

  • Edad. Lee un nombre y una edad (un número entero) e imprime «María tiene 19 años.»
  • Una tarjeta de visita desde el teclado. Lee un nombre, una profesión y un teléfono e imprime con ellos la tarjeta de visita de la lección «Tu primer programa».
  • Un precio con dos cifras. Lee un precio como número decimal e imprímelo con dos cifras y el símbolo del euro: con la entrada 7.5, la salida es Precio: 7.50 €.
  • Suma de dos precios. Lee dos precios decimales e imprime su suma con dos cifras: con la entrada 12.4 y 3.15, la salida es Total: 15.55 €.

Test

Ponte a prueba

1. ¿Qué devuelve await ask("")?
2. Lees los textos "12" y "30". ¿Qué da first + second?
3. ¿Qué hace Number("25")?
4. const a = 2; const b = 3; ¿Qué imprime "Suma: " + a + b?
5. ¿Cómo imprimes 7.5 como 7.50?

Creado por Ivo Gergov como parte de la campaña de Evo Tech por una educación accesible en programación ·