Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Clase 6 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué es un string y cómo se escribe?

La programación es un universo lleno de matices, y uno de sus conceptos básicos es el string, un tipo de dato primitivo esencial. Un string es simplemente una cadena de caracteres que nos permite escribir texto dentro de nuestros programas. Para definir un string en JavaScript, basta con asignarlo a una variable utilizando comillas. Estas comillas pueden ser simples (' '), dobles (" ") o invertidas (`), cada una con sus ventajas específicas.

Por ejemplo, una forma básica de asignar sería:

let string1 = 'Hola Mundo';
let string2 = "JavaScript es genial";

Las comillas invertidas permiten funcionalidades más avanzadas, como la interpolación de variables, de la cual hablaremos más adelante.

¿Cómo concatenar strings en JavaScript?

Concatenar es simplemente unir dos o más strings. Este es un proceso esencial en la manipulación de textos y se puede realizar de varias maneras en JavaScript:

Usando el operador +: Esta es la forma más directa, donde sumamos dos strings.

let string1 = 'Hola Mundo';
let string2 = 'JavaScript es genial';
let concatenado = string1 + " " + string2;
console.log(concatenado); // Imprime "Hola Mundo JavaScript es genial"

Utilizando comillas invertidas y la interpolación de strings: Esta es una forma moderna y flexible que nos permite insertar variables y expresiones dentro de un string.

let nombre = 'Mundo';
let saludo = `Hola ${nombre}, JavaScript es genial y feliz 😊`;
console.log(saludo); // Imprime "Hola Mundo, JavaScript es genial y feliz 😊"

Es vital mantener la consistencia en el uso de comillas en un proyecto para que el código sea visualmente más claro y elegante.

¿Cómo manipular y analizar strings?

JavaScript ofrece un vasto arsenal de métodos para trabajar con strings, lo que simplifica enormemente la manipulación de texto. Aquí algunos ejemplos fundamentales para cualquier desarrollador:

Obtener la longitud del string: Saber cuántos caracteres contiene un string, incluyendo los espacios.
```
let frase = 'JavaScript es extremadamente genial';
console.log(frase.length); // Imprime 35
```

Convertir a mayúsculas o minúsculas: Estas transformaciones son útiles para estandarizar el texto.

console.log(frase.toLowerCase()); // Imprime todo en minúsculas
console.log(frase.toUpperCase()); // Imprime todo en mayúsculas

Extraer subcadenas: Ideal para obtener ciertas partes de un string, comenzando y terminando en los índices especificados.
```
let subCadena = frase.substring(0, 10);
console.log(subCadena); // Imprime "JavaScript"
```

¿Por qué es importante la consistencia en el uso de comillas?

La consistencia en el estilo de código no solo aporta claridad y facilita la colaboración entre desarrolladores, sino que también previene errores. En proyectos reales, es recomendable seguir una convención, ya sea el uso de comillas simples o dobles, para que el código se mantenga uniforme a lo largo del tiempo.

La elección de una u otra no afectará funcionalmente al código, pero sí su legibilidad. Si decides utilizar comillas simples ('string'), intenta mantener ese estilo en todo el proyecto. Sin embargo, si tu aplicación requiere interpolación frecuentemente, las comillas invertidas serán tus aliadas.

En definitiva, dominar el uso de strings en JavaScript no solo es esencial para el manejo del texto dentro de los programas, sino también una habilidad que abrirá puertas hacia códigos más efectivos y elegantes. ¡Sigue explorando estas posibilidades y perfecciona tu arte!

Arnol Daniel Degollado Garrocho

student•

Wilbort Encomenderos Ruiz

student•

Excelente tu resumen bro. saludos!

Platzi Team

student•

String

Los strings (cadenas de texto) en JavaScript son uno de los tipos de datos primitivos y se utilizan para representar y manipular texto.

Creacion de String

En JavaScript, puedes crear un string utilizando comillas simples ('), comillas dobles ("), o backticks (```).

let saludo1 = 'Hola, mundo!'; let saludo2 = "Hola, mundo!"; let saludo3 = Hola, mundo!;

Concatenacion de String

Puedes combinar strings utilizando el operador + o +=, o utilizando plantillas literales (template literals) con backticks.

let parte1 = 'Hola'; let parte2 = 'mundo';

let mensaje = parte1 + ', ' + parte2 + '!'; console.log(mensaje); // Salida: 'Hola, mundo!'

let mensaje2 = ${parte1}, ${parte2}!; console.log(mensaje2); // Salida: 'Hola, mundo!'

Tambien podemos concatenar string haciendo uso de las funciones join y concat

const primeraParte = 'Hola, mi nombre es '; const segundaParte = 'Christan'; const presentacion2 = [primeraParte, segundaParte].join(''); console.log(presentacion2); // salida: Hola, mi nombre es Juan

// Concatenacion con concat const hobbie1 = 'Leer'; const hobbie2 = 'Cantar'; const hobbie3 = 'Bailar'; const hobbies = hobbie1.concat(', ', hobbie2, ', ', hobbie3); console.log(hobbies); // salida: Leer, Cantar, Bailar

Caracteres de escape

Para incluir caracteres especiales en un string, se usan secuencias de escape

// Escape alternativo const escapeAlternativo = "It's my life"; console.log(escapeAlternativo); // salida: It's my life

// Barra invertida const escapeBarraInvertida = 'It\\'s my life'; console.log(escapeBarraInvertida); // salida: It's my life

// Template Literals const escapeTemplateLiterals = It's my life; console.log(escapeTemplateLiterals); // salida: It's my life

Salto de lina en strings

Para hacer salto de linea de nuestro string podemos hacer uso de la barra invertida acompañado de la n (\\n) para indicar donde queremos el salto de linea, si vamos a utilizar string literals con uso de los backticks ()` solo debemos poner explicitamente donde queremos el salto de linea

const poema = 'La rosas son rojas,\\n' + 'el cielo es azul,\\n' + 'el azucar es dulce,\\n' + 'y tambien tu.'; console.log(poema); // salida: La rosas son rojas, el cielo es azul, el azucar es dulce, y tambien tu.

const poema2 = La rosas son rojas, el cielo es azul, el azucar es dulce, y tambien tu.; console.log(poema2); /

Juan Francisco

student•

Comillas invertidas : Alt+96

Jonathan Emmanuel Pumares Chab

student•

En JavaScript se puede crear un string utilizando comillas simples, dobles o invertidas.
Para concatenar strings podemos utilizar template strings o utilizando el operador "+".
Para conocer la longitud de un string se utiliza la propiedad "length".
Con el método "toLowerCase" convierte un string a minúsculas.
Con el método "toUpperCase" convierte un string a mayúsculas.
Con el método "substring" podemos extraer una parte de un string.

Uriel Monterroso

student•

Un consejo para ahorrarse estar escribiendo console.log()

Pueden escribir clg y presionar tab o enter y se generara

console.log()

Tambien pueden instalar Code Runner para no escribir node strings.js sino solo click derecho y seleccionar Run Code o Ctrl+Alt+N

;)

Jafeth Jesús Sánchez Sánchez

student•

En JavaScript, los strings son secuencias de caracteres y se utilizan para representar texto. Puedes crear strings de varias formas y concatenarlos para combinar diferentes partes de texto.

// ---------- Creacion de strings --------
let saludo1 = 'Hola amigos';
let saludo2 = "Estoy aprendiendo JavaScript"
let saludo3 = `${saludo1} desde hoy ${saludo2} en platzi`

//Hola amigos desde hoy Estoy aprendiendo JavaScript en platzi
console.log(saludo3);
// 60
console.log(saludo3.length);
// hola amigos
console.log(saludo1.toLowerCase());
// ESTOY APRENDIENDO JAVASCRIPT
console.log(saludo2.toUpperCase());
//Hola amigos 
console.log(saludo3.substring(0, 12));
``````js
// --- 1. Concatenacion: Operador +  ---
const direccion = "5 de mayo"
const ciudad = "Mexico"
const direccionCompleta = "Mi direccion completa es " + direccion + " " + ciudad;
console.log(direccionCompleta);
``````js
// --- 2. Concatenacion: Templeate Literals  ---
const nombre = "Jafeth";
const pais = "Mexico"
const presentacion = `Mi nombre es ${nombre} del pais ${pais}`;
console.log(presentacion);

Daniel Abraham Perez Larico

student•

éste método es útil para eliminar espacios al inicio y al final de un string, podría ser ideal para almacenar información de una persona que se esté registrando via online y el sistema pueda eliminar espacios inecesarios y guardar el mensaje a la base de datos.

let texto = " Hola Mundo "; console.log(texto.trim()); // "Hola Mundo"

Andrés Soret Chacin

student•

Tipos de datos en JavaScript: Strings

Los strings son un tipo de dato primitivo.
Vamos a ver cómo escribirlos, cómo concatenarlos y también cómo manipularlos.

Escritura de strings

Para escribir un string, creamos una variable y utilizamos comillas. Ejemplo:

let string1 = 'Hola';
let string2 = "JavaScript es genial";
let string3 = `Hola, mundo feliz`;

Podemos utilizar comillas simples, dobles o invertidas. Las comillas invertidas permiten la interpolación de strings usando ${}.

Concatenación de strings

Concatenar strings significa sumarlos. Ejemplo:

let saludo = `${string1}, mundo`;
let concatenado = string1 + " " + string2;

Manipulación de strings

Para imprimir los strings en la terminal, usamos console.log(). Ejemplo:

console.log(string1); // 'Hola'
console.log(string2); // "JavaScript es genial"
console.log(saludo);  // "Hola, mundo"
console.log(concatenado); // "Hola JavaScript es genial"

También se puede concatenar con el operador +. Ejemplo:

let string4 = string1 + " " + string2;
console.log(string4); // "Hola JavaScript es genial"

Longitud y cambio de mayúsculas/minúsculas

Para saber la longitud de un string, usamos .length. Ejemplo:

let frase = "JavaScript es extremadamente genial";
console.log(frase.length); // 35

Para convertir un string a minúsculas o mayúsculas, usamos .toLowerCase() y .toUpperCase(). Ejemplo:

console.log(frase.toLowerCase()); // "javascript es extremadamente genial"
console.log(frase.toUpperCase()); // "JAVASCRIPT ES EXTREMADAMENTE GENIAL"

Substring

Para obtener una parte de un string, usamos .substring(inicio, fin). Ejemplo:
```
console.log(frase.substring(0, 10)); // "JavaScript"
```

Ejemplo completo en código

let string1 = 'Hola';
let string2 = "JavaScript es genial";
let string3 = `Hola, mundo feliz`;

console.log(string1); // 'Hola'
console.log(string2); // "JavaScript es genial"
console.log(string3); // "Hola, mundo feliz"

let saludo = `${string1}, mundo feliz`;
let concatenado = string1 + " " + string2;

console.log(saludo); // "Hola, mundo feliz"
console.log(concatenado); // "Hola JavaScript es genial"

let string4 = string1 + " " + string2;
console.log(string4); // "Hola JavaScript es genial"

let frase = "JavaScript es extremadamente genial";
console.log(frase.length); // 35
console.log(frase.toLowerCase()); // "javascript es extremadamente genial"
console.log(frase.toUpperCase()); // "JAVASCRIPT ES EXTREMADAMENTE GENIAL"
console.log(frase.substring(0, 10)); // "JavaScript"

Calvin Rafael Bobadilla Fernandez

student•

Aca mi resumen:

Kevin Vargas Murcia

student•

substring() El método substring() devuelve una porción de un string. Toma dos parámetros, el índice inicial desde donde empezar y la longitud de la subcadena que queremos.

let cadena = "¡Hola, Mundo!";let subCadena = cadena.substring(0, 5);``console``.log(subCadena); *// Imprime: "¡Hola"*

En este ejemplo, substring(0, 5) devuelve los primeros 5 caracteres de la cadena original.

Sergio Castaneda

student•

Excelente clase!

Ivan Daniel Cuevas

student•

¿Cual es la combinacion del Template literals?

Platzi

student•

Los Template literals se combinan con el signo pesos y llaves, por ejemplo: ${string1}.

Angel Javier Sanchez Tenjo

student•

Los template literals en JavaScript se usan con las comillas invertidas (backticks: `), y te permiten insertar variables y expresiones dentro de cadenas de texto de manera más flexible.

Sintaxis de los Template Literals:

`Texto con ${expresiones} dentro`

Combinación de teclas para las comillas invertidas:

Teclado en inglés (US): Para escribir comillas invertidas (backticks) simplemente presiona la tecla **** (que está justo debajo de la tecla Esc, junto al número 1`).
Teclado en español: En algunos casos, la tecla de las comillas invertidas está junto a la tecla Ñ o puede requerir la combinación Alt + 96.

Alejandro Romero Rodriguez

student•

let nombre = 'Alejandro'
let pais = "Argentina"
let presentacion = `Hola me llamo ${nombre} soy de ${pais}, ¡un gusto!`

console.log(nombre.toUpperCase())
console.log(pais.toLowerCase())
console.log(presentacion.length)
```let nombre = 'Alejandro'let pais = "Argentina"let presentacion = `Hola me llamo ${nombre} soy de ${pais}, ¡un gusto!`
console.log(nombre.toUpperCase())console.log(pais.toLowerCase())console.log(presentacion.length)

Ronnie Mathieu Rincon Rojas

student•

También puedes simplemente escribir node (la primera letra del archivo) y si presionas TAB el terminal lo llenará automáticamente. De esta forma no tendrás que escribir el nombre completo y ahorrarás tiempo.

Julieta Fernanda Eyzaguirre Arenas

student•

excelente curso , muchas gracias,

Anaís Martínez

student•

En MAC las comillas invertidas es option + cierre de corchete ``

Pedro Abel Beltrán Disciplina

student•

Notes:

Herwing Eduardo Vázquez Macías

student•

Básicamente todo aquel tipo de dato que no sea un primitivo es un objeto o un tipo de dato complejo 😁

Jorge López

student•

La comilla invertida, también conocida como backtick (`), se puede hacer en la mayoría de los teclados en la parte superior izquierda, justo debajo de la tecla "Esc". Dependiendo del teclado, puede que necesites presionar la tecla "Shift" o simplemente tocarla.

Recuerda que las comillas invertidas son útiles en JavaScript para crear strings interpolados, facilitando la concatenación de variables dentro de textos.

Camilo Castañeda

student•

Cuál sería la diferencia del método substring respecto al método slice?

Angel Javier Sanchez Tenjo

student•

Los métodos substring() y slice() en JavaScript se usan para extraer una porción de una cadena, pero tienen algunas diferencias clave en su funcionamiento:

1. Sintaxis:

substring(start, end):
- start: Índice de inicio (inclusive) desde el cual empezar a extraer caracteres.
- end: Índice final (no inclusive) donde dejará de extraer caracteres. Si no se especifica, extrae hasta el final de la cadena.
slice(start, end):
- start: Índice de inicio (inclusive) desde el cual empezar a extraer caracteres.
- end: Índice final (no inclusive) donde dejará de extraer caracteres. Si no se especifica, extrae hasta el final de la cadena.

2. Diferencias clave:

Manejo de índices negativos:

substring() no acepta índices negativos. Si se le pasa un valor negativo, lo convierte a 0.
slice() sí permite índices negativos, que cuentan desde el final de la cadena. Por ejemplo, -1 hace referencia al último carácter de la cadena.

let cadena = "Hola Mundo";

// substring no acepta índices negativos, lo trata como 0

console.log(cadena.substring(-4)); // "Hola Mundo" (trata el -4 como 0)

// slice permite índices negativos

console.log(cadena.slice(-4)); // "Mundo" (extrae los últimos 4 caracteres)

Uso típico:

substring(): Se usa comúnmente cuando no necesitas preocuparte por los índices negativos y deseas simplemente extraer una parte de la cadena en un rango definido.
slice(): Es útil cuando necesitas manejar índices negativos (por ejemplo, para obtener los últimos caracteres de una cadena) o cuando prefieres que el método no invierta los índices si el start es mayor que el end.