Convertir una cadena de texto a Pascal case

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, aprenderemos cómo convertir cadenas de texto (strings) a formato Pascal Case utilizando JavaScript. Pascal Case es una convención de nomenclatura comúnmente utilizada en programación donde cada palabra en una palabra compuesta comienza con una letra mayúscula, sin espacios ni separadores entre las palabras. Por ejemplo, "hello world" se convierte en "HelloWorld" en Pascal Case.

A lo largo de este laboratorio, exploraremos varios métodos de manipulación de cadenas de texto (strings) en JavaScript y expresiones regulares para crear una función sólida que pueda convertir cualquier cadena de texto a Pascal Case, independientemente de su formato original.

Comprender el Pascal Case y Configurar el Entorno

El Pascal Case es una convención de nomenclatura donde:

  • La primera letra de cada palabra está en mayúsculas.
  • No se utilizan espacios, guiones ni guiones bajos entre las palabras.
  • Todas las demás letras están en minúsculas.

Por ejemplo:

  • "hello world" → "HelloWorld"
  • "user_name" → "UserName"
  • "first-name" → "FirstName"

Comencemos configurando nuestro entorno de desarrollo.

  1. Abra la Terminal desde la interfaz de WebIDE haciendo clic en "Terminal" en la barra de menú superior.

  2. Inicie una sesión interactiva de Node.js escribiendo el siguiente comando en la Terminal y presionando Enter:

node

Debería ver aparecer el indicador de Node.js (>), lo que indica que ahora está en el entorno interactivo de Node.js.

  1. Intentemos una simple manipulación de cadenas de texto (strings) para calentar motores. Escriba el siguiente código en el indicador de Node.js:
let name = "john doe";
let capitalizedFirstLetter = name.charAt(0).toUpperCase() + name.slice(1);
console.log(capitalizedFirstLetter);

La salida debería ser:

John doe

Este simple ejemplo demuestra cómo poner en mayúsculas la primera letra de una cadena de texto (string). Utilizamos:

  • charAt(0) para obtener el primer carácter.
  • toUpperCase() para convertirlo a mayúsculas.
  • slice(1) para obtener el resto de la cadena de texto (string).
  • Concatenación con + para combinarlos.

Estos métodos de manipulación de cadenas de texto (strings) serán útiles a medida que construyamos nuestro convertidor a Pascal Case.

Trabajar con Expresiones Regulares para Dividir Palabras

Para convertir una cadena de texto (string) a Pascal Case, el primer paso es dividir la cadena en palabras individuales. Podemos utilizar expresiones regulares (regex) para identificar los límites de las palabras independientemente del delimitador utilizado (espacios, guiones, guiones bajos, etc.).

En JavaScript, las expresiones regulares se encierran entre barras inclinadas (/patrón/). Exploremos cómo usar regex para dividir una cadena de texto en palabras.

  1. En su sesión de Node.js, intentemos primero un ejemplo sencillo. Escriba el siguiente código:
let str = "hello_world-example";
let words = str.split(/[-_]/);
console.log(words);

La salida debería ser:

[ 'hello', 'world', 'example' ]

Esta regex /[-_]/ coincide con un guión o un guión bajo, y split() utiliza estas coincidencias como separadores.

  1. Ahora, intentemos una cadena de texto y una regex más complejas. Escriba:
let complexStr = "hello_WORLD-example phrase";
let regex =
  /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
let matches = complexStr.match(regex);
console.log(matches);

La salida debería ser:

[ 'hello', 'WORLD', 'example', 'phrase' ]

Desglosemos esta regex:

  • /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)/: Coincide con secuencias de letras mayúsculas.
  • /[A-Z]?[a-z]+[0-9]*/: Coincide con palabras que pueden comenzar con una letra mayúscula.
  • /[A-Z]/: Coincide con letras mayúsculas individuales.
  • /[0-9]+/: Coincide con secuencias de números.
  • La bandera g hace que la coincidencia sea global (encuentra todas las coincidencias).

El método match() devuelve una matriz (array) de todas las coincidencias encontradas en la cadena de texto. Esto será esencial para nuestro convertidor a Pascal Case, ya que puede identificar palabras en casi cualquier formato.

Poner en Mayúsculas Cada Palabra

Ahora que podemos dividir una cadena de texto (string) en palabras, necesitamos poner en mayúsculas la primera letra de cada palabra y el resto en minúsculas. Implementemos esta funcionalidad.

  1. En su sesión de Node.js, escribamos una función para poner en mayúsculas una sola palabra. Escriba:
function capitalizeWord(word) {
  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
}

// Test with a few examples
console.log(capitalizeWord("hello"));
console.log(capitalizeWord("WORLD"));
console.log(capitalizeWord("javaScript"));

La salida debería ser:

Hello
World
Javascript
  1. Ahora, apliquemos esta función a una matriz (array) de palabras utilizando el método map(). Escriba:
let words = ["hello", "WORLD", "javaScript"];
let capitalizedWords = words.map((word) => capitalizeWord(word));
console.log(capitalizedWords);

La salida debería ser:

[ 'Hello', 'World', 'Javascript' ]

El método map() crea una nueva matriz (array) aplicando una función a cada elemento de la matriz original. En este caso, estamos aplicando nuestra función capitalizeWord a cada palabra.

  1. Finalmente, unamos las palabras en mayúsculas para formar una cadena de texto en Pascal Case:
let pascalCase = capitalizedWords.join("");
console.log(pascalCase);

La salida debería ser:

HelloWorldJavascript

El método join("") combina todos los elementos de una matriz (array) en una sola cadena de texto, utilizando el delimitador proporcionado (una cadena vacía en este caso) entre cada elemento.

Estos pasos demuestran el proceso central de convertir una cadena de texto a Pascal Case:

  1. Dividir la cadena de texto en palabras.
  2. Poner en mayúsculas cada palabra.
  3. Unir las palabras sin ningún separador.

Crear la Función Completa toPascalCase

Ahora que entendemos todos los componentes necesarios, creemos una función completa toPascalCase que pueda manejar cualquier cadena de texto de entrada.

  1. Creemos un archivo de JavaScript para guardar nuestra función. Salga de su sesión de Node.js presionando Ctrl+C dos veces o escribiendo .exit.

  2. En el WebIDE, cree un nuevo archivo haciendo clic en "File" > "New File" en el menú superior.

  3. Guarde el archivo como pascalCase.js en el directorio /home/labex/project.

  4. Copie y pegue el siguiente código en el editor:

/**
 * Converts a string to Pascal case.
 * @param {string} str - The input string to convert.
 * @returns {string} The Pascal cased string.
 */
function toPascalCase(str) {
  // Use regex to match words regardless of delimiter
  const words = str.match(
    /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
  );

  // If no words are found, return an empty string
  if (!words) {
    return "";
  }

  // Capitalize each word and join them
  return words
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("");
}

// Test cases
console.log(toPascalCase("hello world")); // "HelloWorld"
console.log(toPascalCase("some_database_field_name")); // "SomeDatabaseFieldName"
console.log(toPascalCase("Some label that needs to be pascalized")); // "SomeLabelThatNeedsToBePascalized"
console.log(toPascalCase("some-javascript-property")); // "SomeJavascriptProperty"
console.log(
  toPascalCase("some-mixed_string with spaces_underscores-and-hyphens")
); // "SomeMixedStringWithSpacesUnderscoresAndHyphens"
  1. Guarde el archivo presionando Ctrl+S o seleccionando "File" > "Save" del menú.

  2. Ejecute el archivo utilizando Node.js abriendo la Terminal y escribiendo:

node pascalCase.js

Debería ver la siguiente salida:

HelloWorld
SomeDatabaseFieldName
SomeLabelThatNeedsToBePascalized
SomeJavascriptProperty
SomeMixedStringWithSpacesUnderscoresAndHyphens

Nuestra función toPascalCase ahora está funcionando correctamente. Revisemos cómo funciona:

  1. Utilizamos una expresión regular para encontrar coincidencias de palabras en la cadena de texto de entrada, independientemente de los delimitadores utilizados.
  2. Verificamos si se encontraron palabras. Si no, devolvemos una cadena vacía.
  3. Utilizamos map() para poner en mayúsculas cada palabra y join('') para combinarlas sin separadores.
  4. El resultado es una cadena de texto en Pascal Case donde cada palabra comienza con una letra mayúscula y el resto están en minúsculas.

Mejorar y Usar la Función de Pascal Case

Ahora que tenemos una función toPascalCase que funciona, mejoremosla con características adicionales y aprendamos cómo usarla de manera práctica.

  1. Abra su archivo pascalCase.js en el WebIDE.

  2. Modifiquemos la función para manejar mejor los casos extremos (edge cases). Reemplace el código existente con:

/**
 * Converts a string to Pascal case.
 * @param {string} str - The input string to convert.
 * @returns {string} The Pascal cased string.
 */
function toPascalCase(str) {
  // Handle edge cases
  if (!str) return "";
  if (typeof str !== "string") return "";

  // Use regex to match words regardless of delimiter
  const words = str.match(
    /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
  );

  // If no words are found, return an empty string
  if (!words) {
    return "";
  }

  // Capitalize each word and join them
  return words
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("");
}

// Test cases including edge cases
console.log(toPascalCase("hello world")); // "HelloWorld"
console.log(toPascalCase("")); // ""
console.log(toPascalCase(null)); // ""
console.log(toPascalCase("123_abc")); // "123Abc"
console.log(toPascalCase("UPPER_CASE_EXAMPLE")); // "UpperCaseExample"
console.log(
  toPascalCase("some-mixed_string with spaces_underscores-and-hyphens")
); // "SomeMixedStringWithSpacesUnderscoresAndHyphens"

// Create a reusable utility module
module.exports = { toPascalCase };
  1. Guarde el archivo presionando Ctrl+S.

  2. Ahora, creemos un nuevo archivo para demostrar cómo usar nuestra función como una utilidad en otro archivo. Cree un nuevo archivo haciendo clic en "File" > "New File" en el menú superior.

  3. Guarde este archivo como useCase.js en el directorio /home/labex/project.

  4. Agregue el siguiente código a useCase.js:

// Import the toPascalCase function from our utility file
const { toPascalCase } = require("./pascalCase");

// Example: Converting database field names to JavaScript variable names
const databaseFields = [
  "user_id",
  "first_name",
  "last_name",
  "email_address",
  "date_of_birth"
];

// Convert each field name to Pascal case
const javaScriptVariables = databaseFields.map((field) => toPascalCase(field));

// Display the results
console.log("Database Fields:");
console.log(databaseFields);
console.log("\nJavaScript Variables (Pascal Case):");
console.log(javaScriptVariables);

// Example: Creating a class name from a description
const description = "user account manager";
const className = toPascalCase(description);
console.log(`\nClass name created from "${description}": ${className}`);
  1. Guarde el archivo presionando Ctrl+S.

  2. Ejecute el nuevo archivo utilizando Node.js. En la Terminal, escriba:

node useCase.js

Debería ver una salida similar a:

Database Fields:
[ 'user_id', 'first_name', 'last_name', 'email_address', 'date_of_birth' ]

JavaScript Variables (Pascal Case):
[ 'UserId', 'FirstName', 'LastName', 'EmailAddress', 'DateOfBirth' ]

Class name created from "user account manager": UserAccountManager

Esto demuestra un uso práctico de la función toPascalCase para convertir nombres de campos de base de datos a nombres de variables de JavaScript y crear nombres de clases a partir de descripciones.

Tenga en cuenta que también agregamos:

  1. Manejo de errores para entradas nulas, indefinidas o que no son cadenas de texto.
  2. Exportación de módulo para que la función se pueda importar a otros archivos.
  3. Un ejemplo del mundo real de cómo usar la función.

Estas mejoras hacen que nuestra función toPascalCase sea más robusta y utilizable en aplicaciones reales de JavaScript.

Resumen

En este laboratorio (lab), has aprendido cómo convertir cadenas de texto a Pascal case en JavaScript. Esto es lo que has logrado:

  1. Entendido el concepto de Pascal case y sus aplicaciones en la programación.
  2. Aprendido cómo usar expresiones regulares para dividir cadenas de texto en palabras independientemente de los delimitadores.
  3. Aplicado métodos de manipulación de cadenas como charAt(), slice(), toUpperCase() y toLowerCase().
  4. Creado una función robusta toPascalCase que maneja varios formatos de entrada.
  5. Mejorado la función con manejo de errores y la has exportado como un módulo.
  6. Aplicado la función a casos de uso prácticos, como convertir nombres de campos de base de datos a variables de JavaScript.

Estas habilidades son útiles en muchos escenarios de programación, como:

  • Convertir entre diferentes convenciones de nomenclatura.
  • Procesar la entrada del usuario en formatos estandarizados.
  • Trabajar con datos de diferentes fuentes.
  • Crear una nomenclatura consistente en tu código.

Puedes seguir desarrollando estas habilidades explorando otras técnicas de manipulación de cadenas y aplicándolas a tus propios proyectos.