자바스크립트 split 문자열 자르는 방법과 활용

오늘은 자바스크립트의 기본 문법인 split에 대해서 정리해 보려고 한다. 자바스크립트가 아닌 다른 언어에서도 split의 개념과 기능은 거의 유사하기 때문에 자바스크립트를 통해서 기능을 숙지하고 익혀둔다면 다른 언어를 배울 때 많은 도움이 될 수 있다.
split은 문자열을 특정 구분자를 기준으로 자른 후 배열로 반환하는 기능이다. 기능의 개념은 간단하지만 다양한 상황에서 활용도가 엄청 높은 기능이라고 볼 수 있다.

 

---

split의 개념과 특징

자바스크립트의 split() 함수는 문자열을 특정 구분자를 기준으로 분리하여 배열로 반환하는 기능이다. 주어진 문자열을 특정 문자열을 기준으로 나누어서 배열로 만들어 주는데, 만약 구분자가 없다면 문자열 전체가 하나의 요소로 포함된 배열이 반환된다.

구분자
split() 함수는 문자열을 분리할 때 사용할 구분자를 매개변수로 받는다. 이 구분자는 분리하려는 문자열의 패턴을 지정한다.

반환
split() 함수는 분리된 부분 문자열을 요소로 가지는 배열을 반환한다.

구분자의 사용
구분자는 일반적으로 문자열이나 정규 표현식으로 지정된다.

구분자의 처리
split() 함수는 구분자로 지정된 패턴을 찾아 해당 패턴으로 문자열을 분리한다. 이때, 구분자는 반환된 배열에 포함되지 않는다.

매개변수
split() 함수는 구분자 외에도 두 번째 매개변수인 limit를 지정하여 반환할 배열의 최대 길이를 제한할 수 있다.

String.prototype.split()

일반 문자열에서 특정 구분자 값으로 자른 후 그 결괏값을 배열로 반환해 주는 기능

예제 코드

const strData = 'apple,banana,orange';
const splitWords = strData.split(',');

console.log(splitWords);
// ["apple", "banana", "orange"]

위의 코드와 같이 'apple,banana,orange'로 된 문자열을 split 하고자 할 때 콤마 (',') 기준으로 자르게 되면,
결과는 ["apple", "banana", "orange"] 와 같이 배열로 반환한다.

 

split(separator, limit)

인자값 1 separator : split의 대상값인 특정 구분자
인자값 2 limit : split후 결괏값에서 반환할 limit 수 (limit를 넣지 않으면 전체를 반환)

예제 코드

const strData = 'apple,banana,orange,grape,kiwi';
// ','를 기준으로 최대 3개의 요소만 반환
const splitWords = strData.split(',', 3);

console.log(splitWords);
// ["apple", "banana", "orange"]

위의 코드는 split() 함수의 두 번째 매개변수로 3을 전달하였고, 최대 3개의 요소만 반환할 수 있도록 지정하는 것이다.
앞에서부터 "apple", "banana", "orange" 이렇게 3개의 요소만 배열로 반환된다.

반응형

---

 

문자열 분할
문자열 분할은 특정 구분자를 기준으로 문자열을 나누는 작업을 의미하는데, 데이터 처리나 텍스트 분석을 할 때 매우 유용하다. 특히 CSV 파일과 같은 파일 내의 데이터를 읽어와 파싱할 때 많이 사용된다.
CSV (Comma Separated Values) 파일은 각 열의 데이터가 콤마( , )로 구분되어 있는 형식의 파일이다. 이런 형식의 데이터를 읽거나 처리할 때에 split() 함수를 활용하여 각 열의 데이터를 분할할 수 있다.

const csvData = `이름,나이,도시
John,30,New York
Alice,25,Los Angeles
Bob,35,Chicago`;

// 각 행을 분할하여 배열로 반환
const rows = csvData.split('\n'); 
// 각 행의 데이터를 쉼표를 기준으로 분할하여 2차원 배열로 반환
const data = rows.map(row => row.split(',')); 

console.log(data);
/*
[
  ["이름", "나이", "도시"],
  ["John", "30", "New York"],
  ["Alice", "25", "Los Angeles"],
  ["Bob", "35", "Chicago"]
]
*/

위와 같이 CSV 파일에서 데이터를 읽어 csvData 변수에 문자열로 할당해 왔다고 가정하고 코드를 작성하였다.
csvData 변수에 할당된 문자열을 줄 바꿈( \n )을 구분자로 split 하게 되면 각 row별로 배열에 반환이 되고, 반환된 rows 배열을 다시 각 행 별로 콤마 ( , ) 기준으로 분할하게 되면 최종 결괏값이 나오게 된다.
 

---

문자열 처리

문자열에서 특정 부분을 추출하거나 처리할 때 유용하다. 데이터에서 필요한 정보를 추출하거나 원하는 형식으로 문자열을 가공할 때 매우 유용하게 사용된다. 여러 상황에서 활용이 가능하지만, 대표적인 예시로 URL에서 경로를 추출하거나 이메일 주소에서 도메인을 추출하는 경우가 있다.

const url = "https://www.example.com/products/category/item";

// URL을 '/'를 기준으로 분할하여 배열로 반환
const parts = url.split("/"); 
// 첫 번째 3개의 요소는 프로토콜과 도메인이므로 제외하고 경로만 추출
const path = parts.slice(3).join("/");

console.log(path); 
// "products/category/item"

위의 코드를 보게 되면 "https://www.example.com/products/category/item"이라는 URL을 기준으로 코드를 작성하였다.
해당 URL에서 "/"를 기준으로 split 하여 분할하였다.
그러면 ['https:', '', 'www.example.com', 'products', 'category', 'item'] 와 같이 분할된 배열값을 얻게 되고,
프로토콜(https)과 도메인(www.example.com)을 제외하고 경로만 추출하기 위해 slice를 사용한 후 나머지 경로만 가져와 다시 join("/")을 사용하여 문자열로 합쳐줬다.

그 결과 "products/category/item"과 같이 경로만 추출할 수 있다.

---

단어 수 확인

문장이나 단락에서 단어 수를 확인하는 것은 텍스트 분석이나 통계 작업 등에 유용하게 활용된다. split() 함수를 사용하여 문자열을 단어로 분할하고 그 개수를 세는 방법이 흔히 사용된다.

const sentence = "Hello, world! How are you?";
// 공백을 기준으로 단어를 분할하여 배열로 반환
const words = sentence.split(" "); 
// 배열의 길이를 통해 단어 수를 확인
const wordCount = words.length; 
console.log(wordCount); // 5

위의 코드는 "Hello, world! How are you?"라는 문자열을 기준으로 split을 하는 예제 코드다. 해당 문자열에서 공백(" ")을 기준으로 split을 사용하여 분할하고, 반환된 배열의 length를 사용하면 단어의 수를 확인할 수 있다.


정규 표현식 사용

// 공백 문자(스페이스, 탭, 개행 등)를 기준으로 단어를 분할하여 배열로 반환
const words = sentence.split(/\s+/);

또한, 위와 같이 정규 표현식을 사용하여 split을 할 수도 있다.

---

특정 문자 제거

특정 문자를 제거하거나 대체하는 것은 텍스트 처리 작업에서 매우 유용하다. 특정 문자가 텍스트에서 불필요하거나 원하지 않는 경우 해당 문자를 제거하여 문자열을 깔끔하게 처리할 수 있다.

const sentence = "Hello, world!";
// 쉼표를 기준으로 분할한 후 다시 합치면서 쉼표를 제거
const removedComma = sentence.split(",").join(""); 
console.log(removedComma); 
// "Hello world!"

위와 같이 "Hello, world"라는 문자열을 기준으로 split을 활용하는 예제 코드다.
해당 문자열에서 콤마( , )를 기준으로 split 하고, 반환된 배열을 다시 문자열로 연결해 주기 위해 join을 사용하였다.
그 결과 원시 문자열에서 콤마( , )만 제거된 후의 결과를 확인할 수 있다.

---

데이터 가공
데이터 가공은 주로 원시 데이터를 분석하거나 특정 형식으로 변환할 때에 유용하다. 다양한 형태의 데이터를 처리하고 적절한 형식으로 변환하는 데 유용한데, split() 함수는 데이터 가공 작업에서 매우 중요한 역할을 한다.

const rawData = "2022-01-01,John,Smith";
// 쉼표를 기준으로 데이터를 분할하여 배열로 반환
const parsedData = rawData.split(",");
console.log(parsedData); 
// ["2022-01-01", "John", "Smith"]

위와 같이 rawData에 할당된 데이터를 콤마( , )기준으로 먼저 split 시켜준다.

// 0번 인덱스의 날짜 데이터를 Date 객체로 가공
const date = new Date(parsedData[0]);
// 1번 인덱스와 2번 인덱스를 합쳐 이름 데이터 가공
const fullName = `${parsedData[1]} ${parsedData[2]}`;

console.log(date); // Date 객체
console.log(fullName); // "John Smith"

split으로 분할된 배열 데이터를 기준으로 데이터를 가공한다.
0번째의 인덱스는 날짜 데이터, 1번째의 데이터는 이름, 2번째의 데이터는 성이며, 각각의 데이터를 가공해 준다.
날짜 데이터는 Date 객체로 가공하고, 이름과 성 데이터는 합쳐서 전체 이름으로 가공한다.

---

split() 함수 사용 시 주의사항

자바스크립트의 split 함수는 사용법이 간단하며, 위의 정리한 바와 같이 다양한 환경에서 활용된다. 그만큼 활용도는 매우 강력한데, 그에 따른 몇 가지 주의사항이 있다.


구분자 지정
split() 함수를 사용할 때에는 구분자를 정확하게 지정해야 하며, 잘못된 구분자를 사용하게 되면 원하지 않은 결과가 반환될 수 있다. 그렇기 때문에 구분자를 사용할 때에는 구분자가 일반 문자인지, 정규 표현식인지 확인하고 지정하는 것이 중요하다.

공백 처리
기본적으로 split() 함수는 공백을 기준으로 문자열을 분할한다. 공백이 중요한 경우에는 주의해야 하며, 여러 개의 연속된 공백이 있는 경우
공백이 여러 개의 요소로 분할된다.

정규 표현식
정규 표현식을 사용하여 복잡한 패턴으로 문자열을 분할할 수 있지만, 정규 표현식의 패턴을 정확하게 이해하고 사용해야 한다.

빈 문자열
split 하고자 하는 대상의 문자열이 비어 있는 경우 split() 함수는 빈 배열을 반환하게 된다. 그렇기 때문에 이 부분을 고려해서 코드를 작성하는 것이 중요하다.

성능
용량이 큰 데이터나 반복적으로 사용되는 코드에서 split() 함수의 성능을 고려하는 것이 좋다. 문자열을 분할하는 작업은 비교적 높은 비용이 발생할 수 있으므로, 불필요한 반복을 피하고 최적화된 방법을 사용하는 것이 좋다.

유니코드 문자열 처리
유니코드 문자열을 다룰 때 split() 함수의 동작에 주의해야 한다. 몇몇 유니코드 문자는 여러 바이트로 표현되기 때문에 올바른 분할을 보장하기 위해 유니코드를 제대로 처리해야 한다.

---

마무리

이렇게 오늘은 자바스크립트의 split() 함수에 대해서 개념과 특징, 다양한 활용 사례와 주의 사항에 대해서 정리해 봤다. 프로그램을 개발하면서 split()은 정말 많이 사용하기 때문에 해당 기능에 대해서 학습을 하고 숙지하는 것이 좋다. 실제 업무에서 정말 다양한 데이터를 다루게 되고 가공 처리를 많이 하게 되는데, split을 하지 않고서는 데이터 처리는 어려울 수 있다. 그렇기 때문에 데이터를 다루면서 기회가 된다면 split() 함수를 사용해 보는 것이 좋다.