Chuleta de métodos de string en JavaScript (en vivo)

Chuleta de métodos de string en JavaScript

Chuleta de métodos de string en JavaScript (resultados en vivo) | We.Inc

Escribe tu propio texto y mira cómo se ejecuta sobre él en vivo cada método de string habitual de JavaScript: slice, split, replace con regex, padStart, trim y más, además de funciones de validación para copiar.

Los strings de JavaScript incluyen métodos integrados para buscar (includes, indexOf, startsWith), cortar (slice, substring, split), cambiar mayúsculas y minúsculas, recortar espacios, rellenar y reemplazar. Ninguno modifica el texto original: los strings son inmutables, así que cada método devuelve un valor nuevo. Escribe cualquier texto abajo para ver cómo se ejecuta cada método mientras editas.

Los métodos que más se usan

Tarea
Método
Resultado de ejemplo

¿Contiene una palabra?
"web site".includes("site")

Primeros 3 caracteres
"website".slice(0, 3)
"web"

Último carácter
"website".at(-1)

Palabras a un array
"a b c".split(" ")

Reemplazar todas las coincidencias
"a-b-c".replaceAll("-", "/")

Rellenar un número con ceros
"7".padStart(3, "0")

Leer una lista de métodos te da los nombres; ejecutarlos sobre tu propio texto te muestra su comportamiento. La chuleta en vivo de abajo aplica cada método a lo que escribas, así que los casos límite, como los índices negativos, los strings vacíos y los espacios repetidos, aparecen al instante. Después vienen los reemplazos con regex y pequeñas funciones de validación que puedes pegar en un formulario.

Escribe o pega texto en el campo. Cada fila de la chuleta en vivo se recalcula mientras escribes.
Filtra las filas por nombre o por grupo, como Buscar o Cambiar, para encontrar un método rápido.
Edita el patrón de la regex y el reemplazo para probar replace con grupos de captura sobre tu texto.
Copia las funciones auxiliares de más abajo para recortar espacios, crear slugs, poner mayúsculas iniciales y comprobar emails.

Prefiere slice a substr. MDN marca substr como obsoleto, y slice acepta posiciones negativas desde el final.
replaceAll con una regex necesita la bandera g; si no, lanza un TypeError.
Usa localeCompare al ordenar nombres para que los acentos y las mayúsculas se ordenen como esperan los lectores.
length cuenta unidades de código UTF-16, así que un solo emoji puede dar una longitud de 2. Expande el string en un array para contar puntos de código.
Encadenar está bien porque cada llamada devuelve un string nuevo: text.trim().toLowerCase().replaceAll(" ", "-").

Preguntas frecuentes

¿Cuál es la diferencia entre slice y substring?

Ambos extraen parte de un string desde un índice inicial hasta un índice final. slice interpreta un número negativo contando hacia atrás desde el final, así que slice(-3) devuelve los tres últimos caracteres. substring trata los negativos como cero e intercambia los argumentos si el inicio es mayor que el final.

¿Cómo reemplazo todas las apariciones en un string?

Usa replaceAll("old", "new") para texto simple, o replace con una regex global como text.replace(/old/g, "new"). Usar replace con un string simple solo cambia la primera coincidencia.

¿Cómo uso grupos de captura en un reemplazo?

Envuelve partes del patrón entre paréntesis y haz referencia a ellas como $1, $2 en el string de reemplazo. Los grupos con nombre escritos como (?<year>\d{4}) se referencian como $<year>, y $& inserta la coincidencia completa.

¿Cómo compruebo si un string es una dirección de email válida?

Un patrón simple detecta las erratas obvias, pero ninguna regex cumple del todo las reglas del email. La comprobación más fiable en el navegador es un input con type="email", que aplica el propio patrón del estándar HTML, seguida del envío de un mensaje de confirmación.

¿Los métodos de string modifican la variable original?

No. Un valor string no se puede alterar después de crearse. Métodos como toUpperCase devuelven un string nuevo, así que debes asignar el resultado: name = name.toUpperCase().

Índices, negativos y caracteres

Las posiciones empiezan en 0. at() y slice() aceptan números negativos que cuentan hacia atrás desde el final, mientras que charAt() y el acceso con corchetes no, por eso text.at(-1) es la forma limpia de obtener el último carácter.
JavaScript guarda el texto en UTF-16. La mayoría de las letras ocupan una unidad, pero los emoji y algunos sistemas de escritura ocupan dos, así que length, slice y charAt pueden partir ese carácter por la mitad. Array.from(text) o un bucle for...of recorren en cambio los puntos de código reales.

Métodos de búsqueda que devuelven cosas distintas

includes, startsWith y endsWith dan un booleano. indexOf y lastIndexOf devuelven una posición o -1. search recibe una regex y también devuelve una posición. match devuelve las coincidencias, y matchAll devuelve un iterador con cada coincidencia y sus grupos.
Elige según lo que necesite la línea siguiente. Si solo bifurcas entre sí o no, un método booleano se lee con más claridad que comparar un índice con -1.

Limpiar lo que escribe el usuario

Recorta antes de validar, porque el texto pegado suele traer espacios o saltos de línea en los extremos. Normaliza las mayúsculas antes de comparar y reduce las series de espacios en blanco con replace(/\s+/g, " ").
La validación en el navegador es una comodidad para el visitante. Repite las mismas comprobaciones en el servidor, ya que se pueden enviar peticiones sin pasar por tu página.

Reemplazar con una expresión regular

Un reemplazo con regex puede buscar patrones en lugar de texto fijo, reordenar partes con grupos de captura o calcular el reemplazo con una función.

Patrones especiales dentro del string de reemplazo

Patrón
Inserta

La coincidencia completa

El texto de un grupo de captura numerado

$<name>
El texto de un grupo de captura con nombre

Un signo de dólar literal

Patrones de replace con regex que reutilizarás

Cada línea funciona por sí sola. La forma con función te permite transformar cada coincidencia, aquí poniendo en mayúscula la primera letra de cada palabra.

Funciones de validación y limpieza

Slug, mayúsculas iniciales, truncar y una comprobación básica de email

Funciones pequeñas y sin dependencias para formularios y URLs. La comprobación de email solo detecta errores obvios; confirma las direcciones enviando un mensaje.

Métodos que conviene evitar

Métodos antiguos que MDN marca como obsoletos

Método
Usa en su lugar

substr(start, length)
slice(start, start + length)

anchor(), bold(), link() y los demás métodos envoltorio de HTML
Crea los elementos con el DOM y define textContent

Inspeccionar

Número de unidades de código UTF-16

Inspeccionar

Carácter en una posición; los negativos cuentan desde el final

Inspeccionar

Último carácter

Inspeccionar

Carácter en una posición, cadena vacía si está fuera de rango

Inspeccionar

Número de unidad de código UTF-16 en una posición

Buscar

true si el texto aparece en cualquier parte

Buscar

true si la cadena empieza con el texto

Buscar

true si la cadena termina con el texto

Buscar

Primera posición del texto, o -1

Buscar

Última posición del texto, o -1

Buscar

Posición de la primera coincidencia de la regex, o -1

Buscar

Array con todas las coincidencias de una regex global

Cortar

Parte entre dos posiciones

Cortar

Los últimos cinco caracteres

Cortar

Parte entre dos posiciones, sin negativos

Cortar

Array de trozos separados por un separador

Cambiar

Todas las letras en mayúsculas

Cambiar

Todas las letras en minúsculas

Cambiar

Elimina los espacios en blanco de ambos extremos

Cambiar

Elimina los espacios en blanco del principio

Cambiar

Elimina los espacios en blanco del final

Cambiar

Rellena el principio hasta una longitud

Cambiar

Rellena el final hasta una longitud

Cambiar

La cadena unida a sí misma n veces

Cambiar

Reemplaza solo la primera coincidencia

Cambiar

Reemplaza todas las coincidencias

Cambiar

Une cadenas; + hace lo mismo

Cambiar

Forma normal de Unicode, útil antes de comparar

Comparar

Negativo, 0 o positivo para el orden

Todos

Chuleta de métodos de string en vivo

Escribe texto y cada método de abajo se ejecuta sobre él mientras editas.

Tu texto (str)

Filtrar métodos

por ejemplo pad o trim

Grupo de métodos

Métodos de string por grupo ({n} mostrados)

Llamada

Grupo

Qué hace

Resultado

Prueba un replace con regex

Edita un patrón, las banderas y el reemplazo para probarlo con tu propio texto.

Texto

Patrón

Banderas

Reemplazo

Patrón no válido: {msg}

Empieza gratis · Sin tarjeta de crédito

Chuleta de métodos de string en JavaScript (en vivo)