Strings en JavaScript

Crear strings

En JavaScript podés usar comillas simples, dobles o template literals con backticks. Los tres son válidos — los backticks son los más poderosos.

let nombre   = "Juan";          // comillas dobles
let apellido = 'Pérez';         // comillas simples
let saludo   = `Hola, ${nombre} ${apellido}`;  // template literal

console.log(saludo);  // Hola, Juan Pérez

Probá el Ejemplo 1: Crear strings

Template literals — interpolación y multilínea

const nombre = "Ana";
const edad   = 28;
const precio = 1234.5;

// Interpolación — insertar variables y expresiones
document.getElementById("res1").innerHTML =
    `${nombre} tiene ${edad} años y en 10 años tendrá ${edad + 10}.`;

// Formateo de números
document.getElementById("res2").innerHTML =
    `Precio: $${precio.toFixed(2)}`;   // $1234.50

// Multilínea — sin concatenar ni \n
const card = `
    Nombre: ${nombre}

    Edad:   ${edad}

`;
document.getElementById("card").innerHTML = card;

Probá el Ejemplo 2: Template literals

Propiedades y métodos

Los strings tienen métodos incorporados para transformarlos y buscar dentro de ellos:

length y acceso por índice

const texto = "JavaScript";

console.log(texto.length);   // 10
console.log(texto[0]);       // "J"
console.log(texto[4]);       // "S"
console.log(texto.at(-1));   // "t" — último carácter

Transformar texto

const frase = "  Hola Mundo  ";

frase.toUpperCase();    // "  HOLA MUNDO  "
frase.toLowerCase();    // "  hola mundo  "
frase.trim();           // "Hola Mundo"   — quita espacios extremos
frase.trimStart();      // "Hola Mundo  " — solo izquierda
frase.trimEnd();        // "  Hola Mundo" — solo derecha

Buscar y reemplazar

const texto = "JavaScript es genial, JavaScript es popular";

texto.includes("genial");           // true
texto.startsWith("Java");           // true
texto.endsWith("popular");          // true
texto.indexOf("JavaScript");        // 0  — primera ocurrencia
texto.lastIndexOf("JavaScript");    // 22 — última ocurrencia
texto.replace("genial", "poderoso");       // reemplaza la primera
texto.replaceAll("JavaScript", "JS");      // reemplaza todas

Extraer y dividir

const texto = "JavaScript";

texto.slice(0, 4);      // "Java"  — del índice 0 al 3
texto.slice(-6);        // "Script" — los últimos 6 caracteres
texto.slice(4);         // "Script" — desde el índice 4 al final

const csv = "manzana,naranja,uva,pera";
csv.split(",");         // ["manzana", "naranja", "uva", "pera"]

// Unir con join
const frutas = ["manzana", "naranja", "uva"];
frutas.join(" - ");     // "manzana - naranja - uva"

Probá el Ejemplo 3: Métodos de strings

Ejemplo Completo — Procesador de texto

Un formulario que limpia, formatea y analiza el texto ingresado:

const nombre = "  juan pablo pérez  ";
const email  = "JUAN@EJEMPLO.COM";
const frase  = "javascript es el lenguaje de la web";

// Limpiar y formatear nombre
const nombreLimpio = nombre.trim();
const nombreFormateado = nombreLimpio
    .split(" ")
    .map(p => p[0].toUpperCase() + p.slice(1))
    .join(" ");
// "Juan Pablo Pérez"

// Normalizar email
const emailNormal = email.toLowerCase();
const [usuario, dominio] = emailNormal.split("@");

// Contar palabras
const palabras = frase.trim().split(/\s+/);
const cantidad = palabras.length;

document.getElementById("nombre").innerHTML  = nombreFormateado;
document.getElementById("email").innerHTML   = emailNormal;
document.getElementById("usuario").innerHTML = usuario;
document.getElementById("palabras").innerHTML = cantidad;

Probá el Ejemplo 4: Procesador de texto

Buenas Prácticas

• Template literals para interpolación: `Hola ${nombre}` es más claro que "Hola " + nombre
• trim() antes de procesar inputs: los usuarios suelen dejar espacios involuntarios
• includes() para buscar: más legible que indexOf() !== -1
• toLowerCase() para comparar: siempre compará strings en el mismo caso para evitar errores
• Los strings son inmutables: los métodos devuelven un string nuevo — nunca modifican el original