¿Cómo funciona un string en JavaScript?

Autor: | Última modificación: 6 de abril de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

Una de las herramientas más conocidas y que son la base para muchas funcionalidades en JavaScript son las cadenas de caracteres, conocidas en inglés como string. Con este post aprenderás a rasgos generales qué es string en JavaScript y algunas de sus funcionalidades más importantes para que comiences a aplicarlas en tu escritura de código.

¿Qué es un string en JavaScript?

Para poder comprender el concepto de string en JavaScript es importante puntualizar primero tiene una relación directa con las cadenas de caracteres, ya que el objeto String se utiliza para representar y manipular una secuencia de caracteres. Las cadenas son útiles para almacenar datos que se pueden representar en forma de texto. Algunas de las operaciones más utilizadas en cadenas son verificar su length, para construirlas y relacionarlas usando operadores de cadena + y +=, verificando la existencia o ubicación de subcadenas con indexOf() o extraer subcadenas con el método substring().

Un string en JavaScript se utiliza para representar datos textuales. Es un conjunto de elementos de valores enteros sin signo. Cada elemento de la cadena de caracteres ocupa una posición en la cadena. El primer elemento está en el índice 0, el siguiente en el índice 1, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene. Puedes crear cadenas utilizando cadenas literales u objetos string.

Un objeto string en JavaScript

El objeto string es una envoltura alrededor del tipo de dato primitivo string, observa este ejemplo:

const foo = new String('foo'); // Crea un objeto String

console.log(foo);              // Muestra: [String: 'foo']

typeof foo;                    // Devuelve 'object'

Puedes llamar a cualquiera de los métodos del objeto string en un valor de cadena literal: JavaScript automáticamente convierte la cadena literal en un objeto string temporal, llama al método y luego descarta el objeto string temporal.

También puedes usar la propiedad String.length con una cadena literal.

Debes usar cadenas literales a menos que necesites específicamente usar un objeto string, porque los objetos string en JavaScript pueden llegar a tener un comportamiento no tan obvio o intuitivo. Por ejemplo:

const firstString = '2 + 2';              // Crea un valor de cadena literal

const secondString = new String('2 + 2'); // Crea un objeto String

eval(firstString);                        // Devuelve el número 4

eval(secondString);                       // Devuelve la cadena "2 + 2":

Un objeto string en JavaScript tiene una propiedad length, que indica el número de unidades de código UTF-16 en la cadena. Por ejemplo, el siguiente código asigna a helloLength el valor 13, porque «¡Hola, gente!!» tiene 13 caracteres, cada uno representado por una unidad de código UTF-16. Puedes acceder a cada unidad de código utilizando la notación de corchete de los arreglos. No puedes cambiar caracteres individuales, porque las cadenas son objetos inmutables similares a los arreglos:

const hello = '¡Hola, mundo!';

const helloLength = hello.length;

hello[0] = 'L'; // Esto no tiene ningún efecto, porque las cadenas son inmutables

hello[1];       // Esto devuelve "H"

Los caracteres cuyos valores escalares Unicode son mayores que U+FFFF (tal como algunos caracteres chinos/japoneses/coreanos/vietnamitas y algunos «emojis») se almacenan en UTF-16 con dos unidades de código sustituto cada uno. Por ejemplo, una cadena que contenga el carácter único U+1F602 «Cara de risa fuerte de emoji» tendrá una longitud de 2. El acceso a las unidades de código individual en una cadena de este tipo utilizando corchetes puede tener consecuencias indeseables, como la formación de cadenas con diferentes unidades de código suplente, violando el estándar Unicode. (Se deben agregar ejemplos a esta página después de que se corrija el error MDN error 857438).

Crear cadenas

Puedes crear cadenas primitivas a partir de cadenas literales o como objetos usando el constructor String() de la siguiente manera:

const string1 = "Una cadena primitiva";

const string2 = 'También una cadena primitiva';

const string3 = `Otra cadena primitiva`;

const string4 = new String("Un objeto String");

Usando Strings primitivas y Objetos String

Las strings primitivas y los objetos string se pueden usar indistintamente en la mayoría de las situaciones.

Ten en cuenta que JavaScript distingue entre objetos string y valores de primitivas string. (Lo mismo ocurre con Booleanos y Números).

Las cadenas literales (denotadas por comillas simples o dobles) y cadenas devueltas de llamadas a string en un contexto que no es de constructor (es decir, llamado sin usar la palabra clave new) son cadenas primitivas. JavaScript automáticamente convierte las primitivas en objetos string, por lo que es posible utilizar métodos del objeto string en cadenas primitivas.

En las ocasiones en las que invoques un método en una cadena primitiva o haya alguna búsqueda de propiedad, JavaScript ajustará automáticamente la cadena primitiva y llamará al método o realizará la búsqueda de la propiedad:

let s_prim = 'foo'

let s_obj = new String(s_prim)

console.log(typeof s_prim) // Registra "string"

console.log(typeof s_obj)  // Registra "object":

Las primitivas de string y los objetos string también dan diferente resultado cuando se usa eval(). Las primitivas pasadas a eval se tratan como código fuente. Los objetos string se tratan como todos los demás objetos, como aquí:

let s1 = '2 + 2'              // crea una string primitiva

let s2 = new String('2 + 2')  // crea un objeto String

console.log(eval(s1))         // devuelve el número 4

console.log(eval(s2))         // devuelve la cadena "2 + 2"

Por estas razones, el código se puede romper cuando encuentra objetos string y espera una string primitiva en su lugar, aunque generalmente al escribir tu código no es necesario que te preocupes por la distinción. Ahora, algo que te resultará útil saber es que un objeto string siempre se puede convertir a su contraparte primitiva con el método valueOf():

console.log(eval(s2.valueOf()))  // devuelve el número 4

¿Por dónde continuar?

Si ahora que sabes que es un string en JavaScript te intriga el campo de desarrollo web y estás buscando volverte un experto en tus conocimientos sobre JavaScript y otros lenguajes, échale un vistazo a  nuestros bootcamps disponibles, donde encontrarás temarios amplios en este y otros lenguajes imprescindibles para los desarrolladores. ¿A qué esperas para empezar?

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado