14 de noviembre de 2022

Strings

En JavaScript, los datos textuales son almacenados como strings (cadena de caracteres). No hay un tipo de datos separado para caracteres unitarios.

El formato interno para strings es siempre UTF-16, no está vinculado a la codificación de la página.

Comillas

Recordemos los tipos de comillas.

Los strings pueden estar entre comillas simples, comillas dobles o backticks (acento grave):

let single = 'comillas simples';
let double = "comillas dobles";

let backticks = `backticks`;

Comillas simples y dobles son esencialmente lo mismo. En cambio, los “backticks” nos permiten además ingresar expresiones dentro del string envolviéndolos en ${…}:

function sum(a, b) {
  return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

Otra ventaja de usar backticks es que nos permiten extender en múltiples líneas el string:

let guestList = `Invitados:
 * Juan
 * Pedro
 * Maria
`;

alert(guestList); // una lista de invitados, en múltiples líneas

Se ve natural, ¿no es cierto? Pero las comillas simples y dobles no funcionan de esa manera.

Si intentamos usar comillas simples o dobles de la misma forma, obtendremos un error:

let guestList = "Invitados:  // Error: Unexpected token ILLEGAL
  * Juan";

Las comillas simples y dobles provienen de la creación de lenguajes en tiempos ancestrales, cuando la necesidad de múltiples líneas no era tomada en cuenta. Los backticks aparecieron mucho después y por ende son más versátiles.

Los backticks además nos permiten especificar una “función de plantilla” antes del primer backtick. La sintaxis es: func`string`. La función func es llamada automáticamente, recibe el string y la expresión insertada, y los puede procesar. Eso se llama “plantillas etiquetadas”. Es raro verlo implementado, pero puedes leer más sobre esto en el manual.

Caracteres especiales

Es posible crear strings de múltiples líneas usando comillas simples, usando un llamado “carácter de nueva línea”, escrito como \n, lo que denota un salto de línea:

let guestList = 'Invitados:\n * Juan\n * Pedro\n * Maria';

alert(guestList); // lista de invitados en múltiples líneas, igual a la de más arriba

Como ejemplo más simple, estas dos líneas son iguales, pero escritas en forma diferente:

let str1 = "Hello\nWorld"; // dos líneas usando el "símbolo de nueva línea"

// dos líneas usando nueva línea normal y backticks
let str2 = `Hello
World`;

alert(str1 == str2); // true

Existen otros caracteres especiales, menos comunes.

Carácter Descripción
\n Nueva línea
\r En Windows, los archivos de texto usan una combinación de dos caracteres \r\n para representar un corte de línea, mientras que en otros SO es simplemente ‘\n’. Esto es por razones históricas, la mayoría del software para Windows también reconoce ‘\n’.
\'\"\` Comillas
\\ Barra invertida
\t Tabulación
\b, \f, \v Retroceso, avance de formulario, tabulación vertical – Se mencionan para ser exhaustivos. Vienen de muy viejos tiempos y no se usan actualmente (puedes olvidarlos ya).

Como puedes ver, todos los caracteres especiales empiezan con la barra invertida \. Se lo llama “carácter de escape”.

Y como es tan especial, si necesitamos mostrar el verdadero carácter \ dentro de un string, necesitamos duplicarlo:

alert( `La barra invertida: \\` ); // La barra invertida: \

Las llamadas comillas “escapadas” \', \", \` se usan para insertar una comilla en un string entrecomillado con el mismo tipo de comilla.

Por ejemplo:

alert('¡Yo soy la \'morsa\'!'); // ¡Yo soy la 'morsa'!

Como puedes ver, debimos anteponer un carácter de escape \ antes de cada comilla ya que de otra manera hubiera indicado el final del string.

Obviamente, solo necesitan ser escapadas las comillas que son iguales a las que están rodeando al string. Una solución más elegante es cambiar a comillas dobles o backticks:

alert("¡Yo soy la 'morsa'!"); // ¡Yo soy la 'morsa'!

Además de estos caracteres especiales, también hay una notación especial para códigos Unicode \u… que se usa raramente. Los cubrimos en el capítulo opcional acerca de Unicode.

Largo del string

La propiedad ‘length’ contiene el largo del string:

alert(`Mi\n`.length); // 3

Nota que \n es un solo carácter, por lo que el largo total es 3.

length es una propiedad

Quienes tienen experiencia en otros lenguajes pueden cometer el error de escribir str.length() en vez de str.length. Eso no funciona.

Nota que str.length es una propiedad numérica, no una función. No hay que agregar paréntesis después de ella. No es .length(), sino .length.

Accediendo caracteres

Para acceder a un carácter en la posición pos, se debe usar corchetes, [pos], o llamar al método str.at(pos). El primer carácter comienza desde la posición cero: