Cargando...

Cadenas de texto

Ya sabes que un valor puede ser un string. Esta sesión se centra en el texto: escribirlo entre comillas, contar caracteres, unir trozos, meter una comilla dentro y mostrar un mensaje en la página. Herramientas como slice y toUpperCase llegan en la siguiente sesión.

¿Cómo funcionan las cadenas de texto en JavaScript?

Una cadena es texto que el motor trata como un solo valor. La escribes con comillas simples, dobles o backticks (`). "Hola" y 'Hola' son cadenas; 42 sin comillas es un número. La propiedad length indica cuántos caracteres hay (los espacios cuentan). Une con +, o arma una línea con un template literal y ${…}. Una barra invertida (\) permite la misma comilla dentro. Para que el usuario lo vea, usa textContent.

Caja de herramientas de cadenas

📊 Herramientas de texto que el principiante usa primero

Idea Ejemplo Resultado / nota
Comillas dobles let s = "Hi"; Tipo string
Comillas simples let s = 'Hi'; Mismo tipo string
length "Hi".length 2 (caracteres)
Unir con + "Hi" + "!" "Hi!"
Escape "Say \"hi\"" Comilla dentro del mismo estilo
Template ` Hi, ${name} ` Inserta el valor de name

Escribe texto entre comillas

Elige un estilo y cierra igual. "" es una cadena vacía válida.

Cadenas con comillas simples y dobles

javascript 
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);

Cuenta caracteres con length

length es una propiedad, no una función: escribe .length, no .length(). Los espacios cuentan.

Longitud de la cadena

javascript 
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);

Une cadenas con +

El operador + pega texto. Si un lado es cadena, el otro suele convertirse en texto: "Score: " + 10 pasa a "Score: 10". Tenlo en cuenta al mezclar números y texto.

Concatenar con +

javascript 
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);

Pon una comilla dentro de la cadena

Dos opciones fáciles: cambia el estilo de comillas o escapa con barra invertida.

Comillas dentro de una cadena

javascript 
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);

Template literals (backticks)

Con backticks escribes una cadena e insertas valores con ${…}: útil para mensajes con palabras y variables.

Template literal con marcador

javascript 
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);

Muestra una cadena en la página

Construye el mensaje y asígnalo con textContent para que el párrafo muestre texto plano.

La página muestra un saludo en cadena

html 
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>

El párrafo muestra el saludo. Cambia solo user, recarga y comprueba la nueva línea.

Pruébalo tú

  1. Crea un let con comillas dobles y otro con simples; registra ambos y typeof.
  2. Registra .length de "JavaScript" y de una frase corta con espacio.
  3. Une nombre y apellido con + y un espacio; registra el resultado.
  4. Escribe una cadena con apóstrofo o comilla doble (escape o cambio de estilo).
  5. Arma `Hello, ${name}!` con un let name y regístralo.
  6. En el demo HTML cambia solo user, recarga y lee el nuevo saludo.

Errores frecuentes

  • Escribir let s = Hello; sin comillas — busca una variable llamada Hello
  • Abrir con " y cerrar con ' (o al revés)
  • Llamar length() como si fuera función — usa .length
  • Esperar que "5" + 5 sea siempre suma numérica — con cadena, + suele concatenar
  • Saltar a muchos métodos de cadena antes de fijar estas bases (vienen después)

Resumen

  • Las cadenas son texto en '…', "…" o `…`
  • length cuenta caracteres; es una propiedad
  • Une con +, o usa template literals con ${…}
  • Escapa comillas del mismo estilo con \, o cambia el estilo
  • Siguiente: métodos de cadena — como slice, replace y mayúsculas/minúsculas

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 10 de 13
Javascript Tutorial