JavaScript에서 배열 요소 길이만큼 문자열 분할하는 방법

문자열과 숫자 배열이 주어졌을 때, 배열의 각 요소 값을 길이로 삼아 문자열을 순서대로 잘라내는 작업을 해야 한다고 가정해 보겠습니다.

입력 예시

const string = 'Javascript splitting string by given array element';
const arr = [2, 4, 5, 1, 3, 1, 2, 3, 7, 2];

출력 결과

['Ja', 'vasc', 'ript ', 's', 'pli', 't', 'ti', 'ng ', 'string ', 'by']

위 결과를 보면 첫 번째 요소 2에 따라 앞의 2글자 'Ja'가 잘리고, 다음 요소 4에 따라 'vasc'가 잘리는 식으로 배열의 각 값만큼 문자열이 순차적으로 분할됩니다.

splitAtPosition 함수 구현

이제 문자열과 배열을 인자로 받아 분할된 배열을 반환하는 함수 splitAtPosition을 작성해 보겠습니다. 이 함수는 Array.prototype.reduce() 메서드를 활용하여 누적 위치를 추적하면서 문자열을 자릅니다.

코드

const string = 'Javascript splitting string by given array element';
const arr = [2, 4, 5, 1, 3, 1, 2, 3, 7, 2];

const splitAtPosition = (str, arr) => {
  const newString = arr.reduce((acc, val) => {
    return {
      start: acc.start + val,
      newArr: acc.newArr.concat(str.substr(acc.start, val))
    }
  }, {
    start: 0,
    newArr: []
  });
  return newString.newArr;
};

console.log(splitAtPosition(string, arr));

동작 원리

reduce() 메서드는 초기값으로 { start: 0, newArr: [] } 객체를 사용합니다. 각 반복마다 현재 요소 val만큼 start 위치를 이동시키고, str.substr(acc.start, val)로 해당 구간의 부분 문자열을 추출하여 newArr에 추가합니다. 모든 요소를 처리한 후 최종적으로 분할된 문자열 배열을 반환합니다.

참고: substr()은 레거시 메서드로 분류되므로, 최신 코드에서는 slice(acc.start, acc.start + val)를 사용하는 것이 권장됩니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
  'Ja', 'vasc',
  'ript ', 's',
  'pli', 't',
  'ti', 'ng ',
  'string ', 'by'
]

이처럼 reduce()를 활용하면 별도의 반복문 없이도 배열 요소의 길이 정보를 기반으로 문자열을 깔끔하게 분할할 수 있습니다.