코딩 기록/JavaScript

[JS/자바스크립트] 문자열 메서드를 이용해서 언더바 문자열을 카멜 표기법 문자로 바꾸는 함수 만들기 🐪

NomadHaven 2023. 6. 15. 10:05

 

 

언더바 표기법으로 작성된 변수의 이름을 카멜표기법으로 변환하는 프로그램을 만들어라

 textarea에 입력된 내용은 버튼이 클릭되면 변환된다.

 

아래의 테스트 데이터를 textarea에 붙여넣고 한번에 변환한다.

underscore_case

first_name

Some_Variable

calculate_AGE

delayed_departure

 

버튼을 누를시 아래처럼 변환 되어야한다.

 

textarea에 입력된 내용, 클릭하는 버튼은 아래의 DOM 언어를 통해서 삽입된다.

document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));

 

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Make Functions</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(to top left, #28b487, #7dd56f);
      }
      h1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.3;
        width: 100%;
        padding: 30px;
        text-align: center;
        color: white;
      }
      button {
        width: 50px;
        height: 20px;
        margin: 10px;
      }
      textarea {
        width: 300px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Make Functions</h1>
    <script src="codingchallenge.js"></script>
  </body>
</html>

텍스트를 입력하고 버튼을 누르게 하는 기본 index.html 파일이다.

 

 

 

그렇다면 위의 화면에 텍스트를 입력하고 버튼을 누를때,

카멜 표기법으로 변환시키는 코드를 작성해보자

 

 

codingchallenge.js
'use strict';

document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));

//버튼에 클릭할시 function이 실행되게 설정
document.querySelector('button').addEventListener('click', function () {

//textarea에 입력된 value 를 text라는 변수에 대입
  const text = document.querySelector('textarea').value;
  
//textarea에 입력된 value를 split 메서드를 이용해서 행별로 나누기  
//행별로 나뉘에진 문자열은 row라는 배열에 저장
  const rows = text.split('\n');

//rows라는 배열의 인덱스를 파악할 수 있도록 for문은 rows.entires()로 반복
//const[i,row] 에서 i는 인덱스 row는 배열에 있는 element
  for (const [i,row] of rows.entries()) {
  
  // element를 소문자로 변환 -> 공백 삭제- >"_"를 기준으로 문자열을 나눔 -> 
  //"_"기준으로 왼쪽 문자열 first, 오른쪽 문자열 second가 됨.
    const [first, second] = row.toLowerCase().trim().split('_');
    
  //first는 그대로 출력, second 문자열의 0번째 인덱스 문자는 대문자로 교체. 
  //first와 0번째 인덱스 문자가 대문자로 교체된 second를 결합하여 카멜표기법으로 변환 완료.
  //변환완료된 문자는 output이라는 문자열에 대입.
    const ouptut = `${first}${second.replace(
      second[0],
      second[0].toUpperCase()
    )}`;
    
    //output 변수에 padEnd 메서드를 이용해서 글자수를 20개로 맞추며 간격 유지.
    //✅에는 repeat메서드 이용해서 인덱스와 일치하는 개수 출력
    console.log(`${ouptut.padEnd(20)}${'✅'.repeat(i+1)}`);
  }
});

 

위의 코드를 작성하고

아래와 같이 textarea 에 문자열을 입력해보자.

버튼을 누른다음,

아래와 같이 출력된다면

프로그램 완성!