자바스크립트 split() 함수 – 문자열을 분리해서 배열로 변환

`String.prototype.split()` 사용법

split() 함수는
문자열을 주어진 문자열 구분자나 정규식을 기준으로 나누어 배열로 변환하는 함수입니다.

이 함수는 특히 문자열 분리, URL 분석 등의 작업에서 유용하게 사용됩니다.

JavaScript

/* 특정 구분자를 사용한 문자열 분리 */
const sentence = "자바스크립트는 클라이언트 측 스크립팅 언어입니다.";
const wordsArray = sentence.split(" "); // 공백을 기준으로 문자열을 배열로 나눔

console.log(wordsArray);
// 출력: ["자바스크립트는", "클라이언트", "측", "스크립팅", "언어입니다."]


/* 정규식을 사용한 문자열 분리 */
const str = "This is an example.";
const words = str.split(/\s+/); // 문자열을 공백을 나타내는 정규식(/\s+/)으로 나누어 배열로 변환

console.log(words[0]); // 출력: "This"
console.log(words[1]); // 출력: "is"
console.log(words[2]); // 출력: "an"
console.log(words[3]); // 출력: "example."

/* URL 분석 */
const url = "https://www.example.com/path/to/file.html?param=value";

const parts = url.split("?"); // URL을 구분자로 나누어 배열로 변환

console.log(parts[0]); // 출력: "https://www.example.com/path/to/file.html"
console.log(parts[1]); // 출력: "param=value"

split() 함수의 형식은 다음과 같습니다.

구문

str: split() 함수를 적용할 원본 문자열입니다.

매개변수

문자열 split() 함수의 매개변수
`separator`	옵션. 문자열을 나눌 때 사용할 구분자입니다. 문자열 또는 정규식으로 지정할 수 있습니다.
`limit`	옵션. 문자열을 나눌 때 생성되는 배열의 최대 길이를 제한하는 정수입니다. 기본값은 `-1`입니다. `-1`이면 구분자를 모두 사용하여 문자열을 나눕니다. 최대 길이를 초과하여 남은 문자열은 반환하는 배열에 포함되지 않습니다.

반환 값

구분자를 기준으로 나뉜 문자열을 요소로 포함하는 배열입니다.

매개변수와 반환 값 예시

매개변수가 없을 경우

separator를 지정하지 않았을 경우 반환되는 배열은 원본 문자열을 유일한 요소로 가집니다.

JavaScript

const sentence = "반갑습니다. 환영합니다!";
const wordsArray = sentence.split();

console.log(wordsArray);
// 출력: ["반갑습니다. 환영합니다!"]

빈 문자열(`""`)을 구분자로 지정했을 경우

separator를 빈 문자열("")로 지정하면 반환되는 배열은 원본 문자의 모든 문자를 요소로 가집니다.

JavaScript

const sentence = "반갑습니다. 환영합니다!";
const wordsArray = sentence.split("");

console.log(wordsArray);
// 출력: ["반", "갑", "습", "니", "다", ".", " ", "환", "영", "합", "니", "다", "!"]

구분자가 원본 문자열의 처음이나 끝에 있는 경우

separator로 지정한 구분자가 원본 문자열의 처음이나 끝에 있는 경우에 반환되는 배열도 빈 문자열로 시작하거나 끝납니다.

JavaScript 구분자가 원본 문자열의 처음에 있는 경우

const sentence = ",반갑습니다. 환영합니다!";

// 원본 문자열의 처음에 있는 ","를 구분자로 지정합니다.
const wordsArray = sentence.split(",");

// 반환하는 배열의 처음에 빈 문자열("")이 요소로 포함되어 있습니다.
console.log(wordsArray);
// 출력: ["", "반갑습니다. 환영합니다!"]

JavaScript 구분자가 원본 문자열의 끝에 있는 경우

const sentence = "반갑습니다. 환영합니다!,";

// 원본 문자열의 끝에 있는 ","를 구분자로 지정합니다.
const wordsArray = sentence.split(",");

// 반환하는 배열의 끝에 빈 문자열("")이 요소로 포함되어 있습니다.
console.log(wordsArray);
// 출력: ["반갑습니다. 환영합니다!", ""]

JavaScript 구분자가 원본 문자열의 처음과 끝에 있는 경우

const sentence = ",반갑습니다. 환영합니다!,";

// 원본 문자열의 처음과 끝에 있는 ","를 구분자로 지정합니다.
const wordsArray = sentence.split(",");

// 반환하는 배열의 처음과 끝에 빈 문자열("")이 요소로 포함되어 있습니다.
console.log(wordsArray);
// 출력: ["", "반갑습니다. 환영합니다!", ""]

구분자와 원본 문자열이 동일할 경우

구분자와 원본 문자열이 동일할 경우 빈 문자열("") 두 개를 요소로 가지는 배열이 반환됩니다.

구분자와 원본 문자열이 모두 빈 문자열(`""`)일 경우

구분자와 원본 문자열이 모두 빈 문자열("")일 경우 빈 배열이 반환됩니다.

활용 예제

split() 함수는 다양한 상황에서 유용하게 활용될 수 있습니다. 여기에는 몇 가지 예제를 다룹니다.

문자열을 단어로 나누기

문자열 파싱하기

파일 경로에서 파일 이름 추출하기

JavaScript

const filePath = "/path/to/file.txt";

/* "/"로 나누고 배열의 마지막 요소를 pop() 함수로 반환 */
const fileName = filePath.split('/').pop();

console.log(fileName);
// 출력: "file.txt"

자바스크립트 pop() 함수

이메일 주소에서 도메인 추출하기

URL에서 프로토콜 추출하기

JavaScript

const url = "https://www.example.com/path/to/file.html?param=value";
const parts = url.split("://");

const protocol = parts[0];

console.log(protocol);
// 출력 "https"