Strings en JavaScript
En JavaScript, los strings se usan para almacenar y manipular texto. Aprende a crearlos, usarlos y compararlos en esta página.
En JavaScript, los strings se utilizan para almacenar y manipular texto. A diferencia de otros lenguajes, JavaScript no tiene un tipo separado para un único carácter — un carácter es simplemente un string de longitud 1. El formato interno de cada string es siempre UTF-16, razón por la cual cada carácter se corresponde con un código numérico (más sobre esto a continuación).
Un string representa cero o más caracteres escritos entre comillas. Los strings son uno de los tipos de datos primitivos de JavaScript, pero exponen muchos métodos útiles — consulta métodos de los primitivos para entender por qué un primitivo puede tener métodos.
En esta página aprenderás cómo crear strings (con comillas simples, comillas dobles y backticks), usar caracteres especiales, leer la longitud de un string, acceder a caracteres individuales, extraer subcadenas, cambiar el caso, buscar dentro de un string y comparar strings correctamente.
Funciones de String más usadas
| Función | Descripción |
|---|---|
charAt(index) | Devuelve el carácter en el índice especificado. |
charCodeAt(index) | Devuelve el código Unicode del carácter en el índice especificado. |
concat(...strings) | Concatena los argumentos de tipo string al string que lo llama y devuelve un nuevo string. |
includes(searchString, position) | Determina si el string que lo llama contiene searchString. |
indexOf(searchValue, fromIndex) | Devuelve el índice de la primera aparición de searchValue en el string, comenzando la búsqueda en fromIndex. Devuelve -1 si el valor no se encuentra. |
lastIndexOf(searchValue, fromIndex) | Devuelve el índice de la última aparición de searchValue dentro del string que lo llama, buscando hacia atrás desde fromIndex. Devuelve -1 si el valor no se encuentra. |
match(regexp) | Recupera las coincidencias al comparar un string contra una expresión regular. |
matchAll(regexp) | Devuelve un iterador con todos los resultados que coinciden al comparar un string con una expresión regular, incluyendo los grupos de captura. |
repeat(count) | Devuelve un nuevo string formado por el string que lo llama repetido count veces. |
replace(searchFor, replaceWith) | Reemplaza la primera coincidencia de una subcadena o patrón con un string de reemplazo. |
replaceAll(searchFor, replaceWith) | Reemplaza todas las coincidencias de una subcadena o patrón con un string de reemplazo. |
search(regexp) | Busca en el string una coincidencia con una expresión regular y devuelve el índice de la coincidencia. |
slice(startIndex, endIndex) | Extrae una sección de un string y la devuelve como un nuevo string, sin modificar el string original. |
split(separator, limit) | Divide un string en una lista ordenada de subcadenas, las coloca en un array y devuelve el array. La división se realiza buscando un patrón; donde el patrón se proporciona como primer parámetro en la llamada al método. |
startsWith(searchString, position) | Determina si el string que lo llama comienza con los caracteres de searchString. |
substring(startIndex, endIndex) | Devuelve la parte del string entre los índices de inicio y fin, o hasta el final del string. |
toLowerCase() | Devuelve el valor del string que lo llama convertido a minúsculas. |
toUpperCase() | Devuelve el valor del string que lo llama convertido a mayúsculas. |
trim() | Elimina los espacios en blanco de ambos extremos del string. |
trimStart() o trimLeft() | Elimina los espacios en blanco del inicio del string. |
trimEnd() o trimRight() | Elimina los espacios en blanco del final del string. |
valueOf() | Devuelve el valor primitivo de un objeto String. |
Sobre las comillas
JavaScript te ofrece tres formas de delimitar un string: comillas simples, comillas dobles y backticks:
let single = 'single-quoted';
let double = "double-quoted";
let backticks = `backticks`;Las comillas simples y dobles se comportan de manera idéntica — elige un estilo y mantenlo consistente. Los backticks son diferentes: admiten template literals, lo que permite incrustar cualquier expresión directamente en el string envolviéndola en ${…}:
La expresión dentro de ${…} puede ser cualquier cosa — una variable, un cálculo o una llamada a función:
Otra ventaja clave de los backticks es que permiten que un string abarque múltiples líneas:
Las comillas simples y dobles no pueden abarcar múltiples líneas por sí solas. Insertar un salto de línea literal en ellas es un error de sintaxis:
let guestList = "Guests: // SyntaxError: Invalid or unexpected token
* John ";Las comillas simples y dobles son anteriores a los backticks, por lo que los backticks son la opción moderna y más potente.
También puedes colocar una "función de plantilla" (un tagged template) antes del primer backtick:
func`string`;La función func se llama automáticamente y recibe las partes literales del string junto con las expresiones incrustadas, de modo que puede procesarlas. Así es como las bibliotecas implementan plantillas personalizadas, pero en el código cotidiano raramente se necesita.
Caracteres especiales
Puedes crear salida multilínea a partir de strings con comillas simples o dobles usando \n (el carácter de nueva línea), de esta forma:
Existen otros caracteres especiales menos comunes.
Encuentra algunos de ellos en la lista a continuación:
- \', \" estos caracteres especiales se utilizan para las comillas
- \r - retorno de carro. Este carácter se usa actualmente solo en combinación. La combinación de dos caracteres \r\n se utiliza para representar un salto de línea en archivos de texto de Windows.
- \\ - barra invertida
- \t - tabulación
- \xXX - carácter Unicode con el código hexadecimal Unicode XX
- \uXXXX - símbolo Unicode con el código hexadecimal XXXX en codificación UTF-16. Debe incluir exactamente 4 dígitos.
Aquí hay ejemplos con escapes Unicode:
Cada carácter especial comienza con una barra invertida, por lo que la barra invertida también se llama carácter de escape. Puedes usarla para colocar una comilla del mismo tipo dentro de un string:
La barra invertida solo existe para indicarle a JavaScript cómo leer el código fuente — desaparece una vez que el string se crea, por lo que no se almacena en memoria. Cuando realmente necesitas una barra invertida dentro del string, duplícala:
La longitud del string
La propiedad length te indica el número de caracteres en un string:
Ten en cuenta que \n es un único carácter especial, por lo que la longitud es 7 (W3Docs más una nueva línea), no 8.
Un error común es llamar a str.length() en lugar de leer str.length. length es una propiedad, no un método — añadir () provoca un error de "not a function".
Acceso a los caracteres
Los corchetes [pos] son la forma habitual de obtener el carácter en una posición dada. También puedes llamar al método str.charAt(pos). Las posiciones comienzan en cero, por lo que el primer carácter está en el índice 0:
La única diferencia: si no existe ningún carácter en la posición, str[pos] devuelve undefined mientras que str.charAt(pos) devuelve un string vacío ''. El código moderno generalmente prefiere los corchetes; charAt rara vez se usa hoy en día.
Los strings son inmutables
Los strings en JavaScript son inmutables — no se puede cambiar un carácter en su lugar. La asignación siguiente falla silenciosamente (en modo estricto lanza una excepción), por lo que el carácter original permanece sin cambios:
En su lugar, construye un string completamente nuevo y asígnalo de vuelta a la variable:
Cambio de mayúsculas y minúsculas
Dos métodos cambian el caso de todo un string — toUpperCase() y toLowerCase():
Para poner en minúsculas solo un único carácter, primero accede al carácter en el string mediante su índice y luego llama al método sobre ese carácter:
Búsqueda de subcadenas
Hay varias formas de buscar una subcadena dentro de un string.
str.indexOf
str.indexOf(substr, pos) busca substr dentro de str, opcionalmente comenzando desde la posición pos. Devuelve el índice de la primera coincidencia, o -1 si no hay ninguna:
str.lastIndexOf
str.lastIndexOf(substr, pos) funciona como indexOf, pero busca desde el final del string hacia el principio, devolviendo el índice de la última coincidencia.
Un error frecuente: no uses indexOf directamente en una prueba if. Dado que una coincidencia en la posición 0 es falsy, esto parece correcto pero es incorrecto:
Compara siempre contra -1 en su lugar:
includes, startsWith, endsWith
El más moderno str.includes(substr, pos) devuelve true o false dependiendo de si str contiene substr. Úsalo cuando solo necesites saber si existe una coincidencia, no dónde:
Su segundo argumento opcional es la posición desde la que comenzar la búsqueda:
str.startsWith(substr) y str.endsWith(substr) están estrechamente relacionados — comprueban el inicio y el final del string:
Obtención de subcadenas
JavaScript tiene tres métodos para obtener una subcadena: slice, substring y substr. En el código moderno, slice es el recomendado — es el más flexible y substr se considera obsoleto.
str.slice(start, end)
slice devuelve la parte del string desde start hasta (sin incluir) end:
Si se omite el segundo argumento, slice llega hasta el final del string:
También puedes usar valores negativos, que cuentan desde el final:
str.substring(start, end)
substring devuelve la parte del string entre start y end. Es muy similar a slice, con una diferencia notable: si start es mayor que end, substring intercambia los dos argumentos, mientras que slice devuelve un string vacío. También trata los argumentos negativos como 0:
str.substr(start, length)
substr devuelve la parte del string que comienza en start con una length (longitud) dada. A diferencia de los otros, su segundo argumento es una longitud, no una posición final. Este método es obsoleto — prefiere slice en código nuevo.
Un start negativo cuenta desde el final:
Comparación de strings
Los operadores <, >, <= y >= comparan strings carácter a carácter, usando el código Unicode de cada carácter (consulta operadores de comparación para las reglas generales). Dos consecuencias suelen sorprender a los principiantes:
- Una letra minúscula es "mayor que" una mayúscula, porque las minúsculas tienen códigos más altos:
- Las letras con marcas diacríticas se ordenan "fuera de orden" — están fuera del rango básico A–Z, por lo que se comparan como mayores:
Por esta razón, los operadores de comparación están bien para ordenar estrictamente por código, pero no para un orden alfabético amigable para el usuario. Para una comparación según la configuración regional, usa str.localeCompare(other), que devuelve un número negativo, 0 o un número positivo:
Caracteres y sus códigos
Dado que los strings son UTF-16, cada carácter tiene un código numérico. str.codePointAt(pos) devuelve el código del carácter en la posición pos:
String.fromCodePoint(code) hace lo contrario — construye un carácter a partir de un código numérico:
También puedes insertar un carácter por su código en un literal de string usando \u seguido del código hexadecimal:
Como ejemplo más completo, aquí tienes un string construido a partir de los caracteres con códigos 65..220:
Las letras mayúsculas aparecen primero, luego varios caracteres especiales, y la salida termina alrededor de Ö.
Temas relacionados
- Tipos de datos de JavaScript — dónde encajan los strings entre los primitivos.
- Métodos de los primitivos — cómo un string primitivo puede tener métodos.
- Números — el tipo primitivo complementario.
- Operadores de comparación — las reglas completas de comparación.
- Métodos de array — útiles después de que
split()convierte un string en un array.