[Javascript] 문자열 패딩 사용해서 오른쪽 정렬하기 padStart(), padEnd()

다양한 메서드를 활용하여, 배열에 담긴 문자열을 길이 순서로 정렬 후 오른쪽 정렬하여 출력해보자.

 

 

 

 

 

 

const strings = ['very very long string', 'creative', 'hello world'];

 

길이가 다양한 문자열이 담긴 배열이 있다. sort() 메서드를 사용하여 문자열 길이의 내림차순으로 정렬해준다. (sort()의 자세한 설명은 여기)

 

const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']

 

 

 

map() 메서드를 사용하여 내림차순 정렬된 각 문자열의 길이를 배열로 출력한다.

 

const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
 
const stringLength = sorted.map(value => value.length); // [21, 11, 8]

 

 

우리는 가장 긴 문자열 길이인 21만 필요하기 때문에 아래와 같이 추출한다.

 

const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
 
const stringLength = sorted.map(value => value.length); // [21, 11, 8]
const longestLength = stringLength[0]; // 21

 

 

 

forEach()를 사용하여 sorted 배열을 순회하고, 가장 긴 문자열 길이만큼 padStart()를 준다. 그러면 가장 긴 문자열에 맞춰서 오른쪽 정렬이 된다.

 

padStart(지정한 값 - 해당 문자열의 길이)

 

const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
 
const stringLength = sorted.map(value => value.length); // [21, 11, 8]
const longestLength = stringLength[0]; // 21
 
sorted.forEach(value => console.log(value.padStart(longestLength)));
// very very long string
//           hello world
//              creative

 

 

 

 

코드를 간략하게 정리하면 아래와 같다.

 

const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
const longestLength = sorted.map(value => value.length)[0]; // 21
 
sorted.forEach(value => console.log(value.padStart(longestLength)));
// very very long string
//           hello world
//              creative