README.md

JavaScript by breativo

Strings en JavaScript

Descripción

Las cadenas son útiles para almacenar datos que se pueden representar en forma de texto. Trabajar con cadenas de texto (strings) en JavaScript es una tarea común y el lenguaje proporciona una gran variedad de métodos y propiedades para manipular estas cadenas.

En JavaScript, puedes usar tanto comillas simples (') como comillas dobles (") para definir cadenas de texto (strings). La elección entre una u otra es en gran medida una cuestión de preferencia personal o de las convenciones de codificación del proyecto en el que estés trabajando.

Las cadenas se pueden crear como primitivas, a partir de cadena literales o como objetos, usando el constructor String():

JavaScript

let strComillasDobles = "Hola mundo";
let strComillasSimples = 'Hola mundo';

let strObjeto = new String("Hola mundo");

Ademas, de las comillas simples y dobles, en jJavaScript podemos usar el carácter de comilla invertida `. Esta última forma especifica una Plantilla literal: con esta forma puedes interpolar expresiones.

Consistencia

Es importante mantener la consistencia en todo tu proyecto. Si eliges comillas simples, trata de usarlas siempre para definir cadenas de texto, y lo mismo aplica si eliges comillas dobles. Esto ayuda a mantener tu código limpio y fácil de leer.

Comillas anidadas

Una razón práctica para elegir un tipo de comilla sobre el otro es cuando tu cadena contiene comillas. Para evitar tener que escapar las comillas dentro de la cadena, puedes usar un tipo de comilla para definir la cadena y el otro tipo de comilla dentro de la cadena.

JavaScript

let fraseConComillasDobles = 'Él dijo: "Hola, mundo!"';
let fraseConComillasSimples = "Ella respondió: '¡Hola a todos!'";

Concatenación de cadenas de texto

La concatenación es el proceso de unir dos o más cadenas de texto para formar una nueva cadena.

Operador +

JavaScript
//Concatenando dos cadenas de texto
let str = "Hola, " + "mundo!"; // Hola mundo!

//Concatenando cadena de texto y variable
let str = "Hola";
let message = str + "mundo!";  // Hola mundo!

//Concatenando variables
let str = "Hola";
let str1 = "mundo!";
let message = str + str1; // Hola mundo! 

Método .concat()

JavaScript

let str = "Hola ".concat("mundo!"); // Hola mundo!

Interpolación de cadenas de texto

La interpolación es una técnica que permite insertar expresiones dentro de cadenas de texto. En JavaScript, esto se logra principalmente a través de las plantillas literales (template literals), que se delimitan con comillas invertidas (`).

Las plantillas literales permiten incluir expresiones dentro de ${} dentro de la cadena.

JavaScript

let name = "breativo";
let str = `Hola ${name}!`;  // hola breativo!

Ventajas de la Interpolación sobre Concatenación

• Legibilidad: Las plantillas literales ofrecen una sintaxis más clara y concisa, especialmente cuando se insertan varias variables o expresiones dentro de una cadena.
• Facilidad de uso para strings multilínea: Con las plantillas literales, es más sencillo crear cadenas que se extiendan a través de múltiples líneas sin recurrir a la concatenación o al uso de caracteres especiales.
• Expresividad: Permiten incluir expresiones completas de JavaScript dentro de una cadena, lo cual amplía considerablemente las posibilidades de manipulación de strings.

Acceder a elementos de una cadena de texto

Para acceder a elementos específicos (caracteres) de un string en JavaScript, puedes utilizar el método de acceso por índice (bracket notation) o el método charAt(). Los strings se consideran "array-like", lo que significa que cada carácter en el string tiene un índice comenzando desde 0 para el primer carácter, 1 para el segundo, y así sucesivamente.

Si intentas acceder a un índice fuera del rango del string, obtendrás undefined

Acceso por Índice (Bracket Notation)

JavaScript

let str = "Hola mundo!";
let newStr = str[0];  // H
let newStr = str[6];  // m
let newStr = str[20]: // underfined

El método charAt(index) devuelve el carácter en el índice especificado. Si el índice está fuera del rango, charAt() devuelve una cadena vacía (""), lo cual es una diferencia clave respecto al acceso por índice.

Acceso por método charAt()

JavaScript

let str = "Hola mundo!";
let newStr = sty.charAt(0); // H
let newStr = sty.charAt(6); // m
let newStr = sty.charAt(20);// ""

Si deseamos acceder a caracteres de un string empezando desde el final (de atrás hacia adelante), puedes hacerlo calculando la posición relativa al final del string.

JavaScript no tiene un método incorporado específicamente para acceder a los caracteres en reversa directamente, pero puedes lograrlo fácilmente con un poco de matemática y utilizando la propiedad .length del string.

JavaScript

let str = " Hola mundo!";
let strEnd = str[str.length - 1]; // o

Métodos para trabajar con cadenas de texto

• length propiedad que retorna la longitud de una cadena de texto.
• charAt(index) devuelve el carácter de la posición indicada.
• includes(searchString) determina si una cadena contiene una secuencia de caracteres específicos.
• indexOf(searchValue), devuelve el índice de la primera aparición del valor especificado, o -1 si no se encuentra.
• lastIndexOf(searchValue), similar a indexOf, pero busca desde el final del string.
• replace(searchFor, replaceWith), reemplaza la primera aparición de una cadena de texto por otra.
• replaceAll(searchFor, replaceWith), reemplaza todas las apariciones de una cadena de texto por otra.
• slice(startIndex, endIndex), extrae una sección de un string y devuelve un nuevo string.
• split(separator, limit), divide un string en un array de strings mediante un separador.
• substring(startIndex, endIndex), similar a slice, pero no acepta índices negativos.
• toLowerCase(), convierte un string a minúsculas.
• toUpperCase(), convierte un string a mayúsculas.
• trim(), elimina los espacios en blanco desde ambos extremos del string.

Los métodos trimStart() y trimEnd() en JavaScript son variaciones del método trim() y sirven para eliminar los espacios en blanco al inicio y al final de un string, respectivamente, sin afectar el otro extremo del string.

• trimStart()\ o\ trimLeft(), elimina los espacios en blanco al inicio de un string.
• trimEnd()\ o\ trimRight(), elimina los espacios en blanco al final de un string.

JavaScript


let str = "Hola mundo";

// length
let result = str.length;  // 10

// charAt(index)
let result = str.charAt(0); // H
let result = str.charAt(5); // m

// includes(searchString)
let result = str.includes("Hola");  // true
let result = str.includes("Adios"); // false

// indexOf(searchValue)
let result = str.indexOf("Hola");  // 0
let result = str.index.Of("Adios");// -1 

//  lastIndexOf(searchValue)
let result = str.lastIndexOf("o"); // 9

//  replace(searchFor, replaceWith)
let result = str.replace("Hola", "Adios"); // Adios mundo

// replaceAll(searchFor, replaceWith)
let result = str.replaceAll("o", "a"); // Hala munda

// slice(startIndex, endIndex)
let result = str.slice(0,4);  // Hola

// split(separator, limit)
let result = str.split("");   // 'H', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o'
let result = str.split("o"); // 'H', 'la mund', ''

// substring(startIndex, endIndex)
let result = str.substring(5,10); // mundo

// toLowerCase()
let result = str.t0LowerCase();  // hola mundo

// toUpperCase()
let result = str.toUpperCase();  // HOLA MUNDO


let str = "  Hola mundo     ";

// trim()
let result = str.trim();   // "Hola mundo"

// trimStart() | trimend()
let result = str.trimStart(); // "Hola mundo     "
let result = str.trimEnd();   // "      Hola mundo"

🎉 ¡Felicidades! Has completado esta lección con éxito.

Note

JavaScript by breativo está en constante evolución. Pronto se añadirán más lecciones y ejercicios prácticos para mejorar aún más tu experiencia de aprendizaje. Mantente atento a las actualizaciones y sigue mejorando tus habilidades.

Lecciones JavaScript

Siguiente Lección (Numbers en JavaScript)

Encuentrame 👋

breativo Full Stack Developer by iOS | Android | Web

Hola 👋, soy breativo, un desarrollador full stack emergente con una fuerte pasión por la tecnología y el aprendizaje continuo. Mi experiencia no solo se extiende a la programación en lenguajes como Java y Python y al manejo de bases de datos como MySQL y MongoDB, sino también al diseño gráfico. Esta habilidad me permite crear interfaces de usuario intuitivas y visualmente atractivas para mis aplicaciones y proyectos.

Además, estoy comprometido con el crecimiento comunitario a través del conocimiento compartido, por lo que ofrezco cursos y proyectos prácticos que ayudan a otros desarrolladores a avanzar en sus habilidades técnicas y de diseño. Únete a mí en esta aventura de crecimiento y contribución, explorando nuevos retos y aprendiendo juntos en un entorno colaborativo.

Puedes apoyar mi trabajo haciendo "☆ Star" en el repo o nominarme a "GitHub Star". ¡Gracias!

Contacto.