Explora los métodos del objeto String en JavaScript

Introducción

En este laboratorio, explorarás los métodos esenciales del objeto de cadenas de JavaScript para manipular y transformar datos de texto. A través de una serie de ejercicios de codificación prácticos, aprenderás cómo crear cadenas, comprobar su longitud, convertir el caso, extraer caracteres, reemplazar contenido y encontrar posiciones de caracteres utilizando métodos de cadenas integrados de JavaScript.

El laboratorio cubre técnicas fundamentales de manipulación de cadenas, como utilizar la propiedad length para determinar el tamaño de la cadena, toLowerCase() y toUpperCase() para la conversión de caso, charAt() y substring() para la extracción de caracteres, reemplazo y división de cadenas, y indexOf() para localizar caracteres específicos dentro de una cadena. Al trabajar a través de estos pasos, adquirirás experiencia práctica con las operaciones principales de cadenas que son cruciales para el procesamiento de texto efectivo en la programación de JavaScript.

Crea una cadena y comprueba su longitud

En este paso, aprenderás cómo crear cadenas en JavaScript y comprobar su longitud utilizando la propiedad length. Las cadenas son tipos de datos fundamentales en JavaScript que se utilizan para almacenar y manipular texto.

Abra el WebIDE y cree un nuevo archivo llamado string-basics.js en el directorio ~/project. Escribiremos nuestro código de JavaScript para explorar la creación de cadenas y la comprobación de la longitud.

// Creating a string using different methods
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";

// Checking string length using the length property
console.log("Greeting length:", greeting.length);
console.log("Name length:", name.length);
console.log("Empty string length:", emptyString.length);

Cuando ejecute este código, verá la longitud de cada cadena impresa en la consola. La propiedad length devuelve el número de caracteres en una cadena.

Salida de ejemplo:

Greeting length: 18
Name length: 8
Empty string length: 0

Algunos puntos claves para recordar:

• Las cadenas se pueden crear utilizando comillas simples '' o dobles comillas "".
• La propiedad length funciona en cualquier cadena, incluyendo cadenas vacías.
• Los espacios y los signos de puntuación se cuentan en la longitud de la cadena.

Convierte el caso de la cadena con toLowerCase() y toUpperCase()

En este paso, aprenderás cómo convertir el caso de una cadena utilizando dos métodos esenciales de cadenas de JavaScript: toLowerCase() y toUpperCase(). Estos métodos te permiten cambiar el caso de las cadenas fácilmente.

Abra el WebIDE y siga trabajando en el archivo ~/project/string-basics.js del paso anterior. Agregue el siguiente código para explorar la conversión de caso:

// Original string
let originalText = "Hello, JavaScript Programming!";

// Convert to lowercase
let lowercaseText = originalText.toLowerCase();
console.log("Lowercase:", lowercaseText);

// Convert to uppercase
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Uppercase:", uppercaseText);

// Practical example: username normalization
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Normalized Username:", normalizedUsername);

Cuando ejecute este código, verá la siguiente salida:

Salida de ejemplo:

Lowercase: hello, javascript programming!
Uppercase: HELLO, JAVASCRIPT PROGRAMMING!
Normalized Username: johndoe

Puntos claves sobre los métodos de conversión de caso:

• toLowerCase() convierte todos los caracteres de una cadena a minúsculas
• toUpperCase() convierte todos los caracteres de una cadena a mayúsculas
• Estos métodos son útiles para la comparación, normalización y formato de cadenas
• La cadena original permanece inalterada; estos métodos devuelven una nueva cadena

Extrae caracteres y subcadenas con charAt() y substring()

En este paso, aprenderás cómo extraer caracteres individuales y subcadenas de una cadena utilizando los métodos charAt() y substring() en JavaScript.

Abra el WebIDE y siga trabajando en el archivo ~/project/string-basics.js. Agregue el siguiente código para explorar la extracción de caracteres y subcadenas:

// Original string
let message = "JavaScript is awesome!";

// Extract a single character using charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("First character:", firstChar);
console.log("Fifth character:", fifthChar);

// Extract substrings using substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("First 10 characters:", partialString1);
console.log("From 11th character:", partialString2);

// Practical example: extracting username from email
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Username:", username);

Cuando ejecute este código, verá la siguiente salida:

Salida de ejemplo:

First character: J
Fifth character: S
First 10 characters: JavaScript
From 11th character: is awesome!
Username: john.doe

Puntos claves sobre la extracción de caracteres y subcadenas:

• charAt(index) devuelve el carácter en un índice específico (índice basado en cero)
• substring(startIndex, endIndex) extrae una porción de la cadena
• Si no se proporciona un índice final, substring() extrae hasta el final de la cadena
• Los índices empiezan en 0, por lo que el primer carácter está en el índice 0

Reemplaza y divide el contenido de la cadena

En este paso, aprenderás cómo manipular cadenas utilizando los métodos replace() y split() en JavaScript. Estos métodos son herramientas poderosas para modificar y descomponer el contenido de una cadena.

Abra el WebIDE y siga trabajando en el archivo ~/project/string-basics.js. Agregue el siguiente código para explorar el reemplazo y la división de cadenas:

// Original string
let sentence = "Hello, world! Welcome to JavaScript programming.";

// Replace method: replace specific words or characters
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Replaced sentence:", replacedSentence);

// Global replacement using regular expression
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Cleaned sentence:", cleanedSentence);

// Split method: convert string to an array
let words = sentence.split(" ");
console.log("Words array:", words);

// Split with limit
let limitedWords = sentence.split(" ", 3);
console.log("Limited words:", limitedWords);

// Practical example: parsing CSV-like data
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("User First Name:", userDetails[0]);
console.log("User Last Name:", userDetails[1]);

Cuando ejecute este código, verá la siguiente salida:

Salida de ejemplo:

Replaced sentence: Hello, JavaScript! Welcome to JavaScript programming.
Cleaned sentence: Hello, world Welcome to JavaScript programming
Words array: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Limited words: [ 'Hello,', 'world!', 'Welcome' ]
User First Name: John
User Last Name: Doe

Puntos claves sobre replace() y split():

• replace() sustituye una parte de una cadena por otra cadena
• Utilice expresiones regulares con replace() para reemplazos globales
• split() divide una cadena en un array basado en un separador
• split() puede tomar un parámetro límite opcional para controlar el número de divisiones

Encuentra las posiciones de los caracteres con indexOf()

En este paso, aprenderás cómo encontrar la posición de caracteres o subcadenas dentro de una cadena utilizando el método indexOf() en JavaScript. Este método es crucial para buscar y localizar contenido específico dentro de cadenas.

Abra el WebIDE y siga trabajando en el archivo ~/project/string-basics.js. Agregue el siguiente código para explorar la posición de caracteres y subcadenas:

// Original string
let message = "Hello, JavaScript is awesome!";

// Find the position of a character
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Position of comma:", commaPosition);
console.log("First position of 'J':", firstJPosition);

// Find the position of a substring
let javascriptPosition = message.indexOf("JavaScript");
console.log("Position of 'JavaScript':", javascriptPosition);

// Find a character starting from a specific index
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Second position of 'J':", secondJPosition);

// Handling characters not found
let xPosition = message.indexOf("X");
console.log("Position of 'X':", xPosition);

// Practical example: email validation
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Domain name:", domainName);

Cuando ejecute este código, verá la siguiente salida:

Salida de ejemplo:

Position of comma: 5
First position of 'J': 7
Position of 'JavaScript': 7
Second position of 'J': 7
Position of 'X': -1
Domain name: example.com

Puntos claves sobre indexOf():

• Devuelve el primer índice donde se encuentra el carácter o subcadena especificada
• Si el carácter/subcadena no se encuentra, devuelve -1
• Puede comenzar a buscar a partir de un índice específico utilizando un segundo parámetro opcional
• Útil para buscar, validar y extraer partes de cadenas

Resumen

En este laboratorio, los participantes exploraron técnicas fundamentales de manipulación de cadenas en JavaScript, centrándose en métodos y propiedades clave. El laboratorio guió a los aprendices en la creación de cadenas, la verificación de su longitud y la realización de conversiones de caso utilizando métodos como length, toLowerCase() y toUpperCase(). Los participantes aprendieron cómo crear cadenas con diferentes sintaxis, medir la longitud de las cadenas y transformar dinámicamente los casos de texto.

Los ejercicios prácticos demostraron operaciones esenciales de cadenas, incluyendo la extracción de caracteres, la manipulación de subcadenas y la comprensión de la indexación de cadenas. Al trabajar a través de ejemplos de código prácticos, los estudiantes obtuvieron conocimientos prácticos sobre los métodos del objeto de cadena de JavaScript, lo que les permitió manejar y modificar efectivamente datos de texto en sus proyectos de programación.