Lección 4 · 4 de 20

Cadenas y plantillas de texto · JavaScript

Trabaje con texto en JavaScript: unir cadenas, plantillas con comillas invertidas y ${}, longitud, caracteres, mayúsculas y búsquedas.

JavaScript · Cadenas y plantillas de texto en DMarlon Studio: el código del ejemplo y su salida en la terminal

Una cadena se puede unir a otra con +, como en "Product: " + product. Funciona, pero con varios valores enseguida se llena de comillas y signos más.

Las plantillas de texto (*template literals*) van entre comillas invertidas ` ` y dentro de ${...} admiten cualquier expresión: ${price * quantity}` hace la cuenta y pone el resultado en su sitio. Es la forma habitual de componer textos en JavaScript.

`length` dice cuántos caracteres tiene la cadena, y entre corchetes se lee uno de ellos: product[0] es el primero y product[product.length - 1] el último, porque las posiciones empiezan en 0.

Los métodos son funciones que lleva el propio valor y se llaman con un punto: toUpperCase() y toLowerCase() cambian a mayúsculas o minúsculas, includes() dice si contiene un texto y startsWith() si empieza por él. Ninguno cambia la cadena original: devuelven una nueva.

Una plantilla puede ocupar varias líneas tal cual, como el tique receipt: los saltos de línea forman parte del texto.

Código · main.js

const product = "Running shoes";const price = 59.9;const quantity = 2;// Joining strings with +console.log("Product: " + product);// Template literals: backticks and ${...} for any expressionconsole.log(`${quantity} x ${product} = ${price * quantity} euros`);// Length and single characters (positions start at 0)console.log(`"${product}" has ${product.length} characters`);console.log("First letter:", product[0], "| Last:", product[product.length - 1]);// Upper and lower caseconsole.log(product.toUpperCase());console.log(product.toLowerCase());// Searching inside a stringconsole.log("Contains 'shoes'?", product.includes("shoes"));console.log("Starts with 'Run'?", product.startsWith("Run"));// Template literals can span several linesconst receipt = `--- Receipt ---Item:  ${product}Total: ${(price * quantity).toFixed(2)} euros`;console.log(receipt);

Salida · node main.js

Product: Running shoes
2 x Running shoes = 119.8 euros
"Running shoes" has 13 characters
First letter: R | Last: s
RUNNING SHOES
running shoes
Contains 'shoes'? true
Starts with 'Run'? true
--- Receipt ---
Item:  Running shoes
Total: 119.80 euros

Para recordar

Las plantillas usan ` ` y ${expresión}`.
length es el número de caracteres; texto[0], el primero.
toUpperCase, includes y startsWith son métodos de las cadenas.
Las cadenas no cambian: los métodos devuelven otra nueva.

Ejercicio

Cambie el producto por otro y la cantidad por 3, y añada al tique una línea con el precio por unidad y otra con el nombre del producto en mayúsculas.