LabEx
로그인무료 가입

JavaScript 로 문자열을 Pascal Case 로 변환하기

Beginner

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

소개

이 랩에서는 JavaScript 를 사용하여 문자열을 Pascal case 로 변환하는 방법을 배웁니다. Pascal case 는 프로그래밍에서 일반적으로 사용되는 명명 규칙으로, 복합 단어의 각 단어가 대문자로 시작하고 단어 사이에 공백이나 구분 기호가 없는 방식입니다. 예를 들어, "hello world"는 Pascal case 에서 "HelloWorld"가 됩니다.

이 랩에서는 다양한 JavaScript 문자열 조작 메서드와 정규 표현식 (regular expressions) 을 탐구하여 원래 형식에 관계없이 모든 문자열을 Pascal case 로 변환할 수 있는 강력한 함수를 만들 것입니다.

Pascal Case 이해 및 환경 설정

Pascal case 는 다음과 같은 명명 규칙입니다.

  • 각 단어의 첫 글자는 대문자로 표기합니다.
  • 단어 사이에 공백, 하이픈 또는 밑줄을 사용하지 않습니다.
  • 나머지 글자는 소문자로 표기합니다.

예를 들어:

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

개발 환경을 설정하는 것으로 시작해 보겠습니다.

  1. WebIDE 인터페이스에서 상단 메뉴 바의 "Terminal"을 클릭하여 터미널을 엽니다.

  2. 터미널에 다음 명령을 입력하고 Enter 키를 눌러 Node.js 대화형 세션을 시작합니다.

node

Node.js 프롬프트 (>) 가 나타나면 Node.js 대화형 환경에 진입한 것입니다.

  1. 간단한 문자열 조작을 시도하여 몸을 풀어보겠습니다. Node.js 프롬프트에 다음 코드를 입력합니다.
let name = "john doe";
let capitalizedFirstLetter = name.charAt(0).toUpperCase() + name.slice(1);
console.log(capitalizedFirstLetter);

출력 결과는 다음과 같습니다.

John doe

이 간단한 예제는 문자열의 첫 글자를 대문자로 변환하는 방법을 보여줍니다. 다음을 사용했습니다.

  • charAt(0): 첫 번째 문자를 가져옵니다.
  • toUpperCase(): 대문자로 변환합니다.
  • slice(1): 나머지 문자열을 가져옵니다.
  • +를 사용한 연결 (concatenation): 문자열을 결합합니다.

이러한 문자열 메서드는 Pascal case 변환기를 만들 때 유용할 것입니다.

단어 분리를 위한 정규 표현식 (Regular Expressions) 사용

문자열을 Pascal case 로 변환하려면 첫 번째 단계는 문자열을 개별 단어로 분리하는 것입니다. 사용된 구분 기호 (공백, 하이픈, 밑줄 등) 에 관계없이 단어 경계를 식별하기 위해 정규 표현식 (regex) 을 사용할 수 있습니다.

JavaScript 에서 정규 표현식은 슬래시 (/pattern/) 로 묶입니다. 정규 표현식을 사용하여 문자열을 단어로 분리하는 방법을 살펴보겠습니다.

  1. Node.js 세션에서 먼저 간단한 예제를 시도해 보겠습니다. 다음 코드를 입력합니다.
let str = "hello_world-example";
let words = str.split(/[-_]/);
console.log(words);

출력 결과는 다음과 같습니다.

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

이 정규 표현식 /[-_]/는 하이픈 또는 밑줄과 일치하며, split()은 이러한 일치를 구분 기호로 사용합니다.

  1. 이제 더 복잡한 문자열과 정규 표현식을 시도해 보겠습니다. 다음을 입력합니다.
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);

출력 결과는 다음과 같습니다.

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

이 정규 표현식을 분석해 보겠습니다.

  • /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)/: 대문자 시퀀스를 일치시킵니다.
  • /[A-Z]?[a-z]+[0-9]*/: 대문자로 시작할 수 있는 단어를 일치시킵니다.
  • /[A-Z]/: 단일 대문자를 일치시킵니다.
  • /[0-9]+/: 숫자 시퀀스를 일치시킵니다.
  • g 플래그는 일치를 전역적으로 만듭니다 (모든 일치 항목을 찾습니다).

match() 메서드는 문자열에서 찾은 모든 일치 항목의 배열을 반환합니다. 이 메서드는 거의 모든 형식의 단어를 식별할 수 있으므로 Pascal case 변환기에 필수적입니다.

각 단어 대문자화

이제 문자열을 단어로 분리할 수 있으므로 각 단어의 첫 글자를 대문자로 만들고 나머지는 소문자로 만들어야 합니다. 이 기능을 구현해 보겠습니다.

  1. Node.js 세션에서 단일 단어를 대문자화하는 함수를 작성해 보겠습니다. 다음을 입력합니다.
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"));

출력 결과는 다음과 같습니다.

Hello
World
Javascript
  1. 이제 map() 메서드를 사용하여 이 함수를 단어 배열에 적용해 보겠습니다. 다음을 입력합니다.
let words = ["hello", "WORLD", "javaScript"];
let capitalizedWords = words.map((word) => capitalizeWord(word));
console.log(capitalizedWords);

출력 결과는 다음과 같습니다.

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

map() 메서드는 원래 배열의 각 요소에 함수를 적용하여 새 배열을 생성합니다. 이 경우, capitalizeWord 함수를 각 단어에 적용하고 있습니다.

  1. 마지막으로, 대문자화된 단어를 함께 연결하여 Pascal case 문자열을 형성해 보겠습니다.
let pascalCase = capitalizedWords.join("");
console.log(pascalCase);

출력 결과는 다음과 같습니다.

HelloWorldJavascript

join("") 메서드는 제공된 구분 기호 (이 경우 빈 문자열) 를 각 요소 사이에 사용하여 배열의 모든 요소를 단일 문자열로 결합합니다.

이러한 단계는 문자열을 Pascal case 로 변환하는 핵심 프로세스를 보여줍니다.

  1. 문자열을 단어로 분리합니다.
  2. 각 단어를 대문자화합니다.
  3. 구분 기호 없이 단어를 연결합니다.

완전한 toPascalCase 함수 생성

이제 필요한 모든 구성 요소를 이해했으므로 모든 입력 문자열을 처리할 수 있는 완전한 toPascalCase 함수를 만들어 보겠습니다.

  1. 함수를 저장할 JavaScript 파일을 만들어 보겠습니다. Ctrl+C 를 두 번 누르거나 .exit를 입력하여 Node.js 세션을 종료합니다.

  2. WebIDE 에서 상단 메뉴에서 "File" > "New File"을 클릭하여 새 파일을 만듭니다.

  3. 파일을 /home/labex/project 디렉토리에 pascalCase.js로 저장합니다.

  4. 다음 코드를 복사하여 편집기에 붙여넣습니다.

/**
 * 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. Ctrl+S 를 누르거나 메뉴에서 "File" > "Save"를 선택하여 파일을 저장합니다.

  2. 터미널을 열고 다음을 입력하여 Node.js 를 사용하여 파일을 실행합니다.

node pascalCase.js

다음 출력이 표시되어야 합니다.

HelloWorld
SomeDatabaseFieldName
SomeLabelThatNeedsToBePascalized
SomeJavascriptProperty
SomeMixedStringWithSpacesUnderscoresAndHyphens

이제 toPascalCase 함수가 올바르게 작동합니다. 작동 방식을 검토해 보겠습니다.

  1. 사용된 구분 기호에 관계없이 정규 표현식을 사용하여 입력 문자열의 단어를 일치시킵니다.
  2. 단어가 발견되었는지 확인합니다. 그렇지 않은 경우 빈 문자열을 반환합니다.
  3. map()을 사용하여 각 단어를 대문자화하고 join('')을 사용하여 구분 기호 없이 결합합니다.
  4. 결과는 각 단어가 대문자로 시작하고 나머지는 소문자인 Pascal case 문자열입니다.

Pascal Case 함수 향상 및 사용

이제 작동하는 toPascalCase 함수가 있으므로 추가 기능으로 향상시키고 실용적인 방식으로 사용하는 방법을 알아보겠습니다.

  1. WebIDE 에서 pascalCase.js 파일을 엽니다.

  2. 가장자리 사례를 더 잘 처리하도록 함수를 수정해 보겠습니다. 기존 코드를 다음으로 바꿉니다.

/**
 * 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. Ctrl+S 를 눌러 파일을 저장합니다.

  2. 이제 다른 파일에서 함수를 유틸리티로 사용하는 방법을 보여주기 위해 새 파일을 만들어 보겠습니다. 상단 메뉴에서 "File" > "New File"을 클릭하여 새 파일을 만듭니다.

  3. 이 파일을 /home/labex/project 디렉토리에 useCase.js로 저장합니다.

  4. 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. Ctrl+S 를 눌러 파일을 저장합니다.

  2. Node.js 를 사용하여 새 파일을 실행합니다. 터미널에서 다음을 입력합니다.

node useCase.js

다음과 유사한 출력이 표시되어야 합니다.

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

이는 데이터베이스 필드 이름을 JavaScript 변수 이름으로 변환하고 설명에서 클래스 이름을 만드는 데 toPascalCase 함수를 실용적으로 사용하는 것을 보여줍니다.

또한 다음을 추가했습니다.

  1. null, undefined 또는 문자열이 아닌 입력에 대한 오류 처리
  2. 함수를 다른 파일로 가져올 수 있도록 모듈 내보내기
  3. 함수의 실제 사용 예시

이러한 향상으로 toPascalCase 함수는 실제 JavaScript 애플리케이션에서 더욱 강력하고 유용하게 사용할 수 있습니다.

요약

이 랩에서는 JavaScript 에서 문자열을 Pascal case 로 변환하는 방법을 배웠습니다. 다음은 수행한 작업입니다.

  1. Pascal case 의 개념과 프로그래밍에서의 응용 분야를 이해했습니다.
  2. 구분 기호에 관계없이 정규 표현식을 사용하여 문자열을 단어로 분할하는 방법을 배웠습니다.
  3. charAt(), slice(), toUpperCase(), toLowerCase()와 같은 문자열 조작 메서드를 적용했습니다.
  4. 다양한 입력 형식을 처리하는 강력한 toPascalCase 함수를 만들었습니다.
  5. 오류 처리를 통해 함수를 향상시키고 모듈로 내보냈습니다.
  6. 데이터베이스 필드 이름을 JavaScript 변수로 변환하는 것과 같은 실용적인 사용 사례에 함수를 적용했습니다.

이러한 기술은 다음과 같은 많은 프로그래밍 시나리오에서 유용합니다.

  • 서로 다른 명명 규칙 간 변환
  • 사용자 입력을 표준화된 형식으로 처리
  • 다양한 소스의 데이터 작업
  • 코드에서 일관된 명명 생성

다른 문자열 조작 기술을 탐색하고 자체 프로젝트에 적용하여 이러한 기술을 계속 발전시킬 수 있습니다.