Introducción
Una cadena es una secuencia de uno o más caracteres que pueden constar de letras, números o símbolos. Las cadenas en JavaScript son tipos de datos primitivos e inmutables, lo que significa que no cambian.
Dado que las cadenas son la forma en que mostramos y trabajamos con texto y el texto es nuestra forma principal de comunicarnos y comprender a través de las computadoras, las cadenas son uno de los conceptos fundamentales de programación con los que debemos familiarizarnos.
En este artículo, aprenderemos cómo crear y ver la salida de cadenas, cómo concatenar cadenas, cómo almacenar cadenas en variables y las reglas para usar comillas, apóstrofos y nuevas líneas dentro de cadenas en JavaScript.
Crear y ver la salida de cadenas
En JavaScript, hay tres formas de escribir una cadena: pueden escribirse entre comillas simples ( ' ' ), comillas dobles ( " " ) o ` ` ). El tipo de cita utilizado debe coincidir en ambos lados, sin embargo, es posible que los tres estilos se puedan usar en el mismo guión.
Las cadenas que usan comillas dobles y comillas simples son en realidad iguales. Dado que no existe una convención o preferencia oficial por cadenas de punto simple o doble, lo único que importa es mantener la coherencia en los archivos de programa de su proyecto.
'This string uses single quotes.';"This string uses double quotes.";La tercera y más nueva forma de crear una cadena se llama plantilla literal (plantilla literal). Los literales de plantilla usan la comilla invertida (también conocida como acento grave) y funcionan de la misma manera que las cadenas normales con algunas bonificaciones adicionales, que trataremos en este artículo.
`This string uses backticks.`;La forma más fácil de ver la salida de una cadena es imprimirla en la consola, con console.log():
console.log("This is a string in the console.");This is a string in the console.
Otra forma fácil de generar un valor es enviar una ventana emergente de alerta al navegador con alert():
alert("This is a string in an alert.");Ejecutar la línea anterior producirá el resultado en la interfaz de usuario del navegador.
alert() es un método menos común de prueba y visualización de resultados, ya que cerrar alertas rápidamente puede resultar tedioso.
Almacenar una cadena en una variable
Las variables en JavaScript se denominan contenedores que contienen un valor, utilizando las palabras clave var, const o let Podemos asignar el valor de una cadena a una variable nombrada.
const newString = "This is a string assigned to a variable.";Ahora que la newString contiene nuestra cadena, podemos hacer referencia e imprimirla en la consola.
console.log(newString);Esto generará el valor de la cadena.
This is a string assigned to a variable.
Al usar variables para reemplazar cadenas, no tenemos que volver a escribir una cadena cada vez que queremos usarla, lo que nos facilita trabajar y manipular cadenas dentro de nuestros programas.
Concatenar las cadenas
Concatenar significa unir dos o más cadenas para crear una nueva cadena. Para concatenar, usamos el operador de concatenación, representado por un símbolo + El + también es el operador de suma cuando se usa con operaciones aritméticas.
Creemos una instancia de concatenación simple, entre "Sea" y "horse".
"Sea" + "horse";Seahorse
La concatenación une cadenas de un extremo a otro, combinándolas y produciendo un nuevo valor de cadena. Si queremos tener un espacio entre las palabras Sea y horse, debemos incluir un carácter de espacio en blanco en una de las cadenas:
"Sea " + "horse";Sea horse
Unimos cadenas y variables que contienen valores de cadena con concatenación.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author ".";My favorite poem is The Wide Ocean by Pablo Neruda.
Cuando combinamos dos o más cadenas mediante concatenación, creamos una nueva cadena que podemos usar en todo nuestro programa.
Variables en cadenas con valores de Literales de plantilla
Una característica especial de la función literal del modelo es la capacidad de incluir expresiones y variables dentro de una cadena. En lugar de usar la concatenación, podemos usar la ${} para insertar una variable.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = `My favorite poem is ${poem} by ${author}.`;My favorite poem is The Wide Ocean by Pablo Neruda.
Como podemos ver, incluir expresiones en literales de plantilla es otra forma de lograr lo mismo. En este caso, el uso de literales de plantilla puede ser más fácil de escribir y más conveniente.
Literales de cadena y valores de cadena
Puede notar que las cadenas que escribimos en el código fuente están entre comillas o comillas inversas, pero la salida impresa real no incluye comillas.
"Beyond the Sea";Beyond the SeaHay una distinción al referirse a cada uno de estos. Un literal de cadena (literal de cadena) es la cadena tal como está escrita en el código fuente, incluidas las comillas. Un valor de cadena (valores de cadena) es lo que vemos en la salida y no incluye las comillas.
En el ejemplo anterior, "Beyond the Sea" es una cadena literal y Beyond the Sea es un valor de cadena.
Escape de comillas y apóstrofos en cadenas
Debido al hecho de que las comillas se utilizan para denotar cadenas, se deben tener en cuenta consideraciones especiales al utilizar apóstrofos y comillas en las cadenas. Si intenta utilizar un apóstrofo en medio de una cadena de comillas simples, por ejemplo, finaliza la cadena y JavaScript intentará analizar el resto de la cadena deseada como código.
Podemos ver esto al intentar usar un apóstrofe en la siguiente contracción I'm:
const brokenString = 'I'm a broken string';
console.log(brokenString);unknown: Unexpected token (1:24)Lo mismo es cierto para intentar usar comillas en una cadena entre comillas dobles.
Para evitar que se arroje un error en estas situaciones, tenemos algunas opciones que podemos usar:
- Sintaxis de cadena opuesta
- Escapar de los personajes
- Literales de plantilla
Exploraremos estas opciones a continuación.
Utilice una sintaxis de cadena alternativa
Una forma fácil de sortear casos aislados de cadenas potencialmente rotas es utilizar la sintaxis opuesta a la que se utiliza actualmente.
Por ejemplo, apóstrofos en cadenas construidas con ".
"We're safely using an apostrophe in double quotes."Comillas en cadenas construidas con '.
'Then he said, "Hello, World!"';En la forma en que combinamos comillas simples y dobles, podemos controlar la visualización de comillas y apóstrofos dentro de nuestras cadenas. Sin embargo, cuando estamos trabajando en el uso de una sintaxis coherente dentro de los archivos de programación del proyecto, esto puede ser difícil de mantener en una base de código.
Usando el carácter de escape ( \ )
Podemos usar el carácter de barra invertida \ escape para evitar que JavaScript interprete una cita como el final de la cadena.
La sintaxis de \' siempre será una comilla simple y la sintaxis de \" siempre será una comilla doble, sin temor a romper la cadena.
Usando este método, podemos usar apóstrofos en cadenas construidas con ".
'We\'re safely using an apostrophe in single quotes.'También podemos usar comillas dobles en cadenas construidas con ".
"Then he said, \"Hello, World!\"";Este método parece un poco más complicado, pero es posible que deba usar un apóstrofo y una comilla dentro de la misma cadena, lo que requerirá escapar.
Usar literales de plantilla
Los literales de plantilla se definen con comillas inversas y, por lo tanto, tanto las comillas como los apóstrofos se pueden usar de forma segura sin ningún tipo de escape o consideración adicional.
`We're safely using apostrophes and "quotes" in a template literal.`;
Además de evitar la necesidad de que los caracteres escapen y permitir expresiones incrustadas, los literales de plantilla también brindan soporte multilínea, que discutiremos en la siguiente sección.
Cuerdas largas y nueva línea
En ocasiones, es posible que desee insertar una nueva línea o un carácter de retorno de carro en la cadena. Los caracteres de escape \n o \r se pueden usar para insertar una nueva línea en la salida del código.
const threeLines = "This is a string\nthat spans across\nthree lines.";This is a string
that spans across
three lines.
Esto técnicamente funciona para que nuestra salida se transforme en múltiples líneas. Sin embargo, escribir una cadena muy larga en una sola línea rápidamente se volverá muy difícil de leer y trabajar. Podemos usar el operador de concatenación para mostrar la cadena en varias líneas.
const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";En lugar de concatenar varias cadenas, podemos usar el carácter \ escape para escapar de la nueva línea.
const threeLines = "This is a string\n\
that spans across\n\
three lines.";Nota
Para que el código sea más legible, podemos usar cadenas de literales de plantilla en su lugar. Estos eliminan la necesidad de concatenar o escapar cadenas largas que contienen nuevas líneas. Se conservarán la cadena y las nuevas líneas.
const threeLines = `This is a string
that spans across
three lines.`;This is a string
that spans across
three lines.
Es importante conocer todas las formas de crear nuevas líneas y cadenas que abarquen varias líneas, ya que diferentes bases de código pueden utilizar varios estándares.
Conclusión
En este artículo, hemos profundizado en los conceptos básicos del uso de cadenas en JavaScript, desde la creación y visualización de cadenas literales mediante comillas simples y dobles, la creación de plantillas literales, la concatenación, el escape y la asignación de valores de cadena a variables.
