[JavaScript]길이만큼 문자열 자르기

자바스크립트(JavaScript)에서 일정한 길이만큼 문자열을 잘라야 하는 경우가 존재합니다. 예를 들어서 "ABCDEFGHIJ"라는 문자열을 길이 3으로 분리하면 ["ABC", "DEF", "GHI", "J"]라는 문자열 배열을 반환해야 합니다. 각 문자열은 정확한 길이로 분리되어야 합니다. 

 

만약 다음과 같이 문자열의 길이가 특정 길이보다 작은 경우에는 배열의 요소는 한 개입니다. "AB"라는 문자열을 길이 5로 분리하면 ["AB"]라는 문자열 배열을 반환해야 합니다.

 

이번 포스팅은 자바스크립트(JavaScript)에서 문자열을 일정한 길이만큼 자르는 방법을 소개합니다. 

---

match 함수와 정규식을 활용한 방법

function chunkSubstr(str, size) {
  return str.match(new RegExp(`.{1,${size}}`, 'g'));
  // 아래도 동일한 코드입니다.
  // return str.match(new RegExp('.{1,' + size + '}', 'g'));
}

chunkSubstr("ABCDEFGHIJ", 3);
// ['ABC', 'DEF', 'GHI', 'J']

chunkSubstr("AB", 5);
// ['AB']

match() 함수는 문자열에서 정규 표현식과 매치되는 부분을 검색하고 매치되는 항목들을 Array 객체로 반환합니다.

 

정규식의 "g" 플래그는 전역 검색 플래그로 문자열에서 일정한 패턴과 매치되는 항목들을 Array 객체로 반환합니다. 만약 "g" 플래그를 생략한다면 첫 번째 항목만 반환합니다. 다음은 "g" 플래그를 생략한 결과입니다.

function chunkString(str, length) {
  return str.match(new RegExp('.{1,' + length + '}'));
}

chunkString("ABCDEFGHIJ", 3);
// ['ABC', index: 0, input: 'ABCDEFGHIJ', groups: undefined]

문자열 "ABCDEFGHIJ"를 문자열 길이 3으로 분할한 첫 번째 결과인 "ABC"에 대한 내용이 반환되었습니다.

반응형

---

Math 객체를 활용한 방법

match() 함수와 정규식을 활용한 방법은 코드가 간결하다는 장점이 있지만, 분할되는 문자열이 많은 경우 성능적으로 비효율적입니다. 정규식의 대안으로 Math 객체를 활용할 수 있습니다.

function chunkSubstr(str, size) {
  const numChunks = Math.ceil(str.length / size);
  const chunks = new Array(numChunks);

  for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
    chunks[i] = str.substr(o, size);
  }

  return chunks;
}

chunkSubstr("ABCDEFGHIJ", 3);
// ['ABC', 'DEF', 'GHI', 'J']

chunkSubstr("AB", 5);
// ['AB']

const numChnuks = Math.ceil(str.length / size);

Math.ceil() 함수는 소수점 이하를 올림 하는 기능을 가지고 있습니다. Math.ceil() 함수로 일정한 길이로 분할된 결과의 개수(=배열의 크기)를 구합니다.

 

const chunks = new Array(numChunks);

분할된 결과의 개수(=배열의 크기)가 할당된 배열을 생성합니다.

 

chunks[i] = str.substr(o, size);

문자열의 substr() 함수를 사용하여 특정 위치(o)에서 시작하여 특정 크기(size)만큼의 문자열을 배열에 할당합니다.

 

다음은 Math 객체를 제거하고 문자열의 substring() 함수를 사용한 예제입니다.

function chunkSubstr(str, size) {
  const arr = [];

  for (let i = 0; i < str.length; i+=3) {
    arr.push(str.substring(i, i+3));
  }
  return arr;
}

chunkSubstr("ABCDEFGHIJ", 3);
// ['ABC', 'DEF', 'GHI', 'J']

chunkSubstr("AB", 5);
// ['AB']