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

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:08

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

Curso de Fundamentos de JavaScript

Clase 6 de 55

Clase 6 / 55

Recursos

¿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!

Andrés Soret Chacin

Hace 2 años

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"

Comentarios (62)62 comentarios

Arnol Daniel Degollado Garrocho

Wilbort Encomenderos Ruiz

Platzi Team

Juan Francisco

Juan Miguel Jimenez

Hace un año

Uriel Monterroso

Jonathan Emmanuel Pumares Chab

Daniela Angulo Ruiz

Hace 10 meses

Jafeth Jesús Sánchez Sánchez

Daniel Abraham Perez Larico

Calvin Rafael Bobadilla Fernandez

Kevin Vargas Murcia

Sergio Castaneda

Eugenia Maldonado

Julieta Melek Fernanda Eyzaguirre Arenas

Ivan Daniel Cuevas

Platzi

Angel Javier Sanchez Tenjo

Alejandro Romero Rodriguez

Ronnie Mathieu Rincon Rojas

Sergio Alejandro Ahumada Corredor

Hace un mes

Brigitte Avila

Roberto Carlos Moreira España

Hace 8 meses

Seba Cardoso

Hace 3 meses

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

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

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

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