Métodos de Strings - parte 2

Transformación de strings

JavaScript ofrece un conjunto robusto de métodos para transformar strings, permitiéndonos modificar el texto de diversas maneras sin alterar el string original. Estas transformaciones son fundamentales en el desarrollo web moderno, desde la manipulación de datos de usuario hasta el formateo de texto para presentación.

Cambios de mayúsculas y minúsculas

Los métodos de cambio de caso son probablemente las transformaciones más comunes que realizamos en strings:

• toUpperCase()

Convierte todos los caracteres a mayúsculas:

const message = "Hello, World!";
console.log(message.toUpperCase()); // "HELLO, WORLD!"

• toLowerCase()

Convierte todos los caracteres a minúsculas:

const username = "JohnDoe123";
console.log(username.toLowerCase()); // "johndoe123"

Estos métodos son particularmente útiles para normalizar entradas de usuario o realizar comparaciones insensibles a mayúsculas/minúsculas:

function checkPassword(input, storedPassword) {
    // Comparación insensible a mayúsculas/minúsculas
    return input.toLowerCase() === storedPassword.toLowerCase();
}

• toLocaleLowerCase() y toLocaleUpperCase()

Versiones que respetan las reglas de conversión específicas del idioma:

const turkishText = "İstanbul";
console.log(turkishText.toLowerCase()); // "i̇stanbul"
console.log(turkishText.toLocaleLowerCase('tr')); // "istanbul"

Estos métodos son cruciales cuando se trabaja con idiomas que tienen reglas especiales de conversión de caso.

Reemplazo de texto

JavaScript proporciona métodos útiles para sustituir partes de un string por otro contenido:

• replace()

Reemplaza la primera ocurrencia de un patrón (string o expresión regular) con otro string:

const text = "The quick brown fox";
console.log(text.replace("quick", "fast")); // "The fast brown fox"

Con expresiones regulares, podemos hacer reemplazos más sofisticados:

const html = "<div>Hello</div>";
const plainText = html.replace(/<[^>]*>/g, "");
console.log(plainText); // "Hello"

El flag g (global) permite reemplazar todas las ocurrencias, no solo la primera:

const sentence = "apple orange apple banana apple";
console.log(sentence.replace(/apple/g, "pear")); // "pear orange pear banana pear"

• replaceAll() (ES2021+)

Método moderno que reemplaza todas las ocurrencias sin necesidad de expresiones regulares:

const phrase = "The car is red and the bike is red too";
console.log(phrase.replaceAll("red", "blue")); // "The car is blue and the bike is blue too"

También acepta expresiones regulares con el flag global:

const code = "function add(x, y) { return x + y; }";
console.log(code.replaceAll(/[xy]/g, "param")); // "function add(param, param) { return param + param; }"

Uso de funciones de reemplazo

Tanto replace() como replaceAll() pueden utilizar una función para determinar el valor de reemplazo:

const prices = "Product A: $10, Product B: $25, Product C: $15";

// Aumentar todos los precios en un 10%
const updatedPrices = prices.replace(/\$(\d+)/g, (match, price) => {
    const newPrice = Math.round(parseInt(price) * 1.1);
    return `$${newPrice}`;
});

console.log(updatedPrices); // "Product A: $11, Product B: $28, Product C: $17"

Esta técnica es extremadamente útil para transformaciones complejas basadas en el contenido encontrado.

Relleno y alineación

JavaScript ofrece métodos para ajustar la longitud de un string añadiendo caracteres al principio o al final:

• padStart()

Rellena el string desde el principio hasta alcanzar la longitud deseada:

const number = "42";
console.log(number.padStart(5, "0")); // "00042"

const reference = "ABC";
console.log(reference.padStart(10, "-")); // "-------ABC"

Este método es ideal para formatear números, códigos de referencia o crear alineaciones en texto:

// Formatear números de tarjeta de crédito
const lastFourDigits = "1234";
const maskedCardNumber = lastFourDigits.padStart(16, "*");
console.log(maskedCardNumber); // "************1234"

• padEnd()

Similar a padStart(), pero añade el relleno al final del string:

const productCode = "XYZ";
console.log(productCode.padEnd(10, ".")); // "XYZ......."

const name = "Report";
console.log(name.padEnd(20, " ") + "| Status: Complete"); // "Report              | Status: Complete"

Estos métodos son particularmente útiles para crear tablas de texto alineadas o formatear datos para presentación:

function createTable(data) {
    return data.map(item => {
        return item.name.padEnd(15, " ") + 
               item.category.padEnd(10, " ") + 
               item.price.toString().padStart(8, " ");
    }).join("\n");
}

const products = [
    { name: "Laptop", category: "Tech", price: 1299 },
    { name: "Headphones", category: "Audio", price: 199 },
    { name: "Mouse", category: "Tech", price: 25 }
];

console.log(createTable(products));
// Laptop         Tech      1299
// Headphones     Audio      199
// Mouse          Tech        25

Normalización de strings

La normalización es crucial cuando se trabaja con caracteres Unicode, especialmente para comparaciones o búsquedas:

const char1 = "\u00F1"; // ñ como un solo carácter
const char2 = "\u006E\u0303"; // ñ como 'n' + tilde combinante

console.log(char1 === char2); // false
console.log(char1.normalize() === char2.normalize()); // true

El método normalize() acepta diferentes formas de normalización:

const text = "café";

// Diferentes formas de normalización
console.log(text.normalize("NFC")); // Forma de composición canónica
console.log(text.normalize("NFD")); // Forma de descomposición canónica
console.log(text.normalize("NFKC")); // Forma de composición de compatibilidad
console.log(text.normalize("NFKD")); // Forma de descomposición de compatibilidad

La normalización es especialmente importante cuando se procesan textos internacionales o se realizan operaciones de ordenación y búsqueda.

Conversión, plantillas y patrones sobre strings

Conversión entre strings y arrays

La transformación entre strings y arrays es una operación frecuente en JavaScript:

• split()

Divide un string en un array de substrings basándose en un separador:

const sentence = "The quick brown fox jumps over the lazy dog";
const words = sentence.split(" ");
console.log(words); // ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]

const csvData = "John,Doe,35,Developer";
const fields = csvData.split(",");
console.log(fields); // ["John", "Doe", "35", "Developer"]

Podemos limitar el número de elementos resultantes con un segundo parámetro:

const text = "a:b:c:d:e:f";
console.log(text.split(":", 3)); // ["a", "b", "c"]

También podemos usar expresiones regulares como separador:

const input = "Hello  World\tJavaScript\nProgramming";
const parts = input.split(/\s+/); // Divide por cualquier espacio en blanco
console.log(parts); // ["Hello", "World", "JavaScript", "Programming"]

• Array.join()

El complemento de split() es el método join() de los arrays, que une elementos en un string:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.join(", ")); // "Apple, Banana, Cherry"

const path = ["users", "john", "documents", "report.pdf"];
console.log(path.join("/")); // "users/john/documents/report.pdf"

Estas transformaciones son fundamentales para procesar datos estructurados:

// Convertir una frase a slug para URL
function slugify(text) {
    return text
        .toLowerCase()
        .split(" ")
        .filter(word => word.length > 0)
        .join("-");
}

console.log(slugify("JavaScript String Methods")); // "javascript-string-methods"

Transformación con template literals

Los template literals (ES6+) ofrecen una forma elegante de transformar strings mediante interpolación:

const user = {
    name: "Alice",
    age: 28,
    role: "Developer"
};

const greeting = `Hello, ${user.name}! You are ${user.age} years old and work as a ${user.role}.`;
console.log(greeting); // "Hello, Alice! You are 28 years old and work as a Developer."

Podemos incluir expresiones JavaScript completas dentro de la interpolación:

const price = 19.99;
const tax = 0.21;

const receipt = `
Product: Premium Subscription
Price: $${price.toFixed(2)}
Tax (21%): $${(price * tax).toFixed(2)}
Total: $${(price + price * tax).toFixed(2)}
`;

console.log(receipt);
// Product: Premium Subscription
// Price: $19.99
// Tax (21%): $4.20
// Total: $24.19

• Tagged templates

Una característica avanzada son las plantillas etiquetadas, que permiten procesar template literals con una función:

function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        const value = values[i] || '';
        return result + str + (value ? `<strong>${value}</strong>` : '');
    }, '');
}

const name = "JavaScript";
const year = 1995;
const message = highlight`The language ${name} was created in ${year}.`;

console.log(message); // "The language <strong>JavaScript</strong> was created in <strong>1995</strong>."

Esta técnica es la base de bibliotecas populares como styled-components para React.

Transformación de caracteres individuales

Para transformaciones a nivel de carácter, podemos combinar varios métodos:

// Capitalizar la primera letra de cada palabra
function titleCase(text) {
    return text
        .toLowerCase()
        .split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
}

console.log(titleCase("the quick brown fox")); // "The Quick Brown Fox"

Otro ejemplo es la conversión de camelCase a kebab-case:

function camelToKebab(text) {
    return text.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}

console.log(camelToKebab("backgroundColor")); // "background-color"
console.log(camelToKebab("userProfileSettings")); // "user-profile-settings"

Transformación con expresiones regulares

Las expresiones regulares amplían enormemente nuestras capacidades de transformación:

// Extraer todos los números de un texto
function extractNumbers(text) {
    const matches = text.match(/\d+/g) || [];
    return matches.map(Number);
}

console.log(extractNumbers("The price is $42.99 for 3 items")); // [42, 99, 3]

Podemos usar replace() con captura de grupos para reorganizar texto:

// Invertir el formato de fecha de DD/MM/YYYY a YYYY-MM-DD
function reformatDate(dateStr) {
    return dateStr.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$2-$1');
}

console.log(reformatDate("25/12/2023")); // "2023-12-25"

Las expresiones regulares también son útiles para eliminar o reemplazar patrones complejos:

// Eliminar etiquetas HTML manteniendo su contenido
function stripHtml(html) {
    return html.replace(/<[^>]*>|<\/[^>]*>/g, '');
}

console.log(stripHtml("<p>Hello <strong>World</strong>!</p>")); // "Hello World!"

La combinación de métodos de string con expresiones regulares proporciona herramientas útiles para casi cualquier transformación de texto que necesitemos realizar en nuestras aplicaciones JavaScript.