[JS/자바스크립트] 문자열 메서드를 모두 이용하여 복잡한 문자열을 구조를 갖춘 형태로 변환하는 함수 만들기

처음부터 정보를 형식에 맞춰서 받으면 정말 좋겠지만,

현실은 그렇지 않다.

 

보통은 어지럽게 혼합된 정보를 본인이 필터링하고 다듬어서 형식을 갖추게 한다음

고객에게 전달하곤한다.

 

예를 들어 항공편의 정보가 아래와 같이 전달되었다고 해보자  

const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';

지연 비행기와 도착시간등이 어지럽게 정보안에 섞여 있어서 한번에 알아보기 쉽지 않다.

해당 정보로 서비스를 하기 위해서는 아래와 같은 형식을 갖춰야 한다.

그렇다면 위의 어지러운 정보를 어떻게 위처럼 형식을 갖춰 정렬할 수 있을까?

자바스크립트의 문자열 메서드를 쓰면 가능하다.

아래는 위의 정보에 문자열 메서드를 적용해 복잡한 정보를 깔끔하게 출력한 코드이다.

// 처음에 주어진 정보. 정렬이 필요함.
const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';

//0번째 인덱스부터 3개 글자까지 자른 뒤 대문자로 변환하게 하는 함수.
const getCode = str => str.slice(0,3).toUpperCase()

//fligts 변수를 '+'를 기준으로 나눈다. 나눠져서 생긴 문자열의 수만큼 for문을 반복한다,
  for(const flight of flights.split('+')){
  
  //+를 기준으로 나눠진 문자열 element 을 다시 ';'를 기준으로 나눈다. 
  //첫번째로 나눠진 element는 지연정보, 도착 정보의 종류를 알려주는 type
  //두번째로 나눠진 element는 출발지인 from
  //세번째로 나눠진 element는 도착지인 to
  //네번째로 나눠진 element는 시간인 time 이 된다.
    const [type, from, to, time ] = flight.split(';');
   
   //type이 "_Dayled"로 시작한다면 지연정보이므로 🔴를 추가한다. 아니면 그대로 둬야하므로 ''
    const output =  `${type.startsWith('_Delayed') ? 
    '🔴' : ''} 
    //type에 붙은 "_"를 모두 공백으로 대체하기 위해 replaceAll메서드 사용. 
    ${type.replaceAll(
      '_',' ')} 
    //앞의 3글자를 대문자로 바꿔주는 함수를 from과 to에 적용.  
      from ${getCode(from)} to ${getCode(to)}  
   //time의 :는 h로 대체   
      (${time.replace(':','h')})`
   // 위의 모든 변형이 적용된 문자열의 간격을 균일화 하기위해 padStart메서드 적용.   
      .padStart(36)
    
    
    console.log(output);

  }

 

위의 코드를 적용하면 아래와 같이 출력되어야 한다.