Tres formas de escribir strings en JavaScript
En JavaScript tienes tres delimitadores para crear strings. Dos son intercambiables; el tercero viene con superpoderes.
Las comillas simples y dobles generan strings idénticos: elige un estilo y mantenlo (la mayoría de los proyectos modernos usan comillas simples por defecto, o dejan que el formateador decida). En cambio, los backticks crean un template literal, y ahí es donde la cosa se pone interesante: permiten interpolación y abarcan varias líneas.
Por debajo, las tres formas producen el mismo tipo primitivo de string. El delimitador es solo una cuestión de sintaxis.
Secuencias de escape y comillas dentro del string
Dentro de un string, la barra invertida inicia una secuencia de escape. Las más habituales son \n (salto de línea), \t (tabulación), \\ (barra invertida literal) y \" / \' para incluir el mismo tipo de comilla con el que abriste el string:
La mayoría de los escapes se evitan eligiendo el otro tipo de comilla: 'She said "hi" and left.' no necesita ni una barra invertida. Pragmatismo antes que dogma.
Template literals en JavaScript: el superpoder de los backticks
Un template literal hace dos cosas que los strings normales no pueden. Lo primero: interpola expresiones con ${...}:
Todo lo que metas dentro de ${...} es una expresión de JavaScript, no solo un nombre de variable. Puedes usar operaciones aritméticas, llamadas a funciones, ternarios e incluso otros template literals: todo vale.
En segundo lugar, los template literals abarcan varias líneas sin necesidad de \n:
Los saltos de línea del código fuente se convierten en saltos de línea dentro del string. Para cualquier texto que pase de una etiqueta corta, los backticks suelen ser la mejor opción.
Interpolación de strings en JavaScript: mejor que concatenar
Antes de que existieran los template literals, la única forma de armar un string dinámico era a punta de operador +:
Ambas producen la misma salida. El template literal se lee como la frase que estás construyendo, mientras que la versión con + te obliga a andar pendiente de comillas, espacios y operadores de concatenación. Usa + solo cuando vayas a añadir algo pequeño a un string existente. Para cualquier cosa más larga, tira de backticks.
Los strings son inmutables
Cada método que aparenta modificar un string en realidad devuelve uno nuevo:
Si quieres que el cambio surta efecto, tienes que asignar el resultado a alguna variable. A más de un principiante le ha pasado: escribe s.replace("a", "b") esperando que s cambie... pero no. Los strings en JavaScript funcionan como los números: el valor en sí no se puede mutar, solo puedes apuntar la variable hacia un valor nuevo.
Métodos de string en JavaScript que sí vas a usar
La API de strings es enorme, pero en el día a día acabas tirando siempre de los mismos métodos:
Algunos detalles que conviene grabarse:
lengthes una propiedad, no un método: va sin paréntesis.replacecon un string plano reemplaza solo la primera coincidencia. Para cambiar todas, usareplaceAllo una expresión regular con la banderag.slice(start, end)funciona con un rango semiabierto: el carácter en la posiciónendno se incluye.- Los índices negativos en
slicecuentan desde el final:s.slice(-3)devuelve los últimos tres caracteres.
Indexar y recorrer caracteres de un string
Los strings en JavaScript se comportan como arrays de caracteres de solo lectura. Puedes acceder por índice y recorrerlos, pero no asignar un valor a una posición concreta:
for...of recorre los code points, lo cual maneja bien la mayoría de Unicode. En cambio, acceder por índices (s[i]) itera code units UTF-16, y eso puede partir emojis y otros caracteres fuera del BMP por la mitad. Para texto normal da igual, pero si trabajas con contenido que escriben los usuarios, mejor tira de for...of o [...s].
Tagged template literals
Hay una variante más que conviene conocer, aunque no la uses todos los días. Un template literal etiquetado (tagged) llama a una función pasándole por separado los trozos estáticos del string y los valores interpolados:
La función tag decide cómo queda el string final: puede escapar HTML, construir SQL de forma segura, compilar CSS o parsear GraphQL. Este patrón lo vas a ver mucho más en librerías (styled-components, graphql-tag, lit-html) que escribirlo tú mismo. Pero cuando necesites procesar strings a medida, los tags son la herramienta más limpia.
Errores comunes al trabajar con strings
Una lista corta de cosas con las que se tropieza todo el mundo:
- Olvidar asignar el resultado de un método.
s.trim()por sí solo no hace nada. - Usar
+para concatenar un número con un string."Age: " + 30 + 5da"Age: 305", no"Age: 35". Con template literals esto se evita:`Age: ${30 + 5}`. - Confundir
==con la comparación de strings. La igualdad la veremos bien más adelante, pero ojo:"1" == 1estruey"1" === 1esfalse. Mejor usa siempre===. - Asumir que
lengthequivale al número de caracteres. Con emojis y otros caracteres de pares subrogados,"".lengthda 2, no 1. Usa[..."".length]oArray.from(s).lengthcuando necesites contar los caracteres que realmente percibe el usuario.
Siguiente paso: Numbers y BigInt
Los strings son un tipo primitivo; los números son otro, y el sistema numérico de JavaScript tiene sus propias rarezas: un único tipo Number tanto para enteros como para decimales, más BigInt para cuando eso se queda corto. Eso lo vemos en la siguiente página.
Preguntas frecuentes
¿Qué diferencia hay entre las comillas y los backticks en JavaScript?
Las comillas simples (') y dobles (") crean strings normales y son intercambiables. Los backticks (`) crean template literals, que admiten interpolación con ${...} y permiten texto en varias líneas sin tener que escapar nada. Usa backticks siempre que tengas que meter una variable dentro del texto o escribir en varias líneas.
¿Cómo meto una variable dentro de un string en JavaScript?
Con un template literal: envuelve el texto entre backticks y coloca la expresión dentro de ${...}. Por ejemplo, `Hola, ${name}!` evalúa name y lo inserta en el texto. Dentro de ${...} puedes poner cualquier expresión: ${a + b}, ${user.name.toUpperCase()}, e incluso anidar otros template literals.
¿Los strings en JavaScript son inmutables?
Sí. Todos los métodos de string (toUpperCase, slice, replace, etc.) devuelven un string nuevo en lugar de modificar el original. Si escribes s.toUpperCase() y no asignas el resultado a ninguna variable, no pasa nada. Funciona igual que los strings en Python o Java.
¿Qué son los tagged template literals?
Un tagged template literal llama a una función pasándole por separado las partes de texto y los valores interpolados: tag`Hola, ${name}` equivale a tag(["Hola, ", ""], name). Librerías como styled-components o graphql-tag usan este patrón para procesar o transformar el template antes de devolver el resultado final.
