본문 바로가기
Reference/JAVASCRIPT

split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다.

by @webstoryboy 2022. 11. 14.

split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다.
Reference/Javascript

split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다.

by @webs 2022. 11. 10.

split()

split() 메서드는 구분자를 이용하여, 여러개의 문자열(배열)을 반환합니다. 구분자는 문자열에서 끊어야 할 부분을 의미합니다. 정규식 표현도 가능하며, 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. 구분자를 설정하면, 해당 구분자는 삭제되고, 남은 문자열이 배열로 반환됩니다.


특징 설명
유형(type) String.prototype.split()
버전(version) ES1
결과값(return) 배열(Array)
사용성 ★★★★☆

문법(Syntax)

"문자열".split(구분자)
"문자열".split(구분자, 제한)

onst str1 = "javascript reference";
const currentStr1 = str1.split('');      // ['j','a','v','a','s','c','r','i','p','t','','r','e','f','e','r','e','n','c','e']
const currentStr2 = str1.split(' ');     // ['javascript', 'reference']
const currentStr3 = str1.split('', 1);   // ['j']
const currentStr4 = str1.split('', 2);   // ['j', 'a']
const currentStr5 = str1.split(' ', 1);  // ['javascript']
const currentStr6 = str1.split(' ', 2);  // ['javascript', 'reference']
const currentStr7 = str1.split('j');     // ['', 'avascript reference']
const currentStr8 = str1.split('a');     // ['j', 'v', 'script reference']
const currentStr9 = str1.split('e');     // ['javascript r', 'f', 'r', 'nc', '']

const str2 = "java/script/refer/ence";
const currentStr10 = str2.split('/');    // ['java', 'script', 'refer', 'ence']

const str3 = "java&script&refer!ence";
const currentStr11 = str3.split('!');       // ['java&script&refer', 'ence']
const currentStr12 = str3.split('&');       // ['java', 'script', 'refer!ence']
const currentStr13 = str3.split(/&|\!/);    // ['java', 'script', 'refer', 'ence']

const str4 = "javascript reference";
const currentStr14 = str4.split('').join();                 //j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
const currentStr15 = str4.split('').join('*');              //j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
const currentStr16 = str4.split('').reverse().join();       //e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j
const currentStr17 = str4.split('').reverse().join('/');    //e/c/n/e/r/e/f/e/r/ /t/p/i/r/c/s/a/v/a/j
  • 문자열(string) : 문자열을 설정합니다.
  • 구분자(separator) : 구분할 수 있는 값을 설정합니다.
  • 제한(limit) : 문자열의 최대 개수를 설정합니다.

정의(Definition)

  • split() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다.
  • split() 메서드는 원래 문자열을 변경하지 않습니다.
  • split() 메서드는 정규식 표현을 사용하여 구분자를 설정할 수 있습니다.

문자열 변경과 관련된 메서드

  • slice() 메서드는 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열 및 배열을 반환합니다.
  • substring() 메서드는 시작 위치와 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다.
  • substr() 메서드는 시작 위치에 길이 값을 추출하여, 새로운 문자열을 반환합니다.
  • split() 메서드는 구분자를 이용하여, 여러개의 문자열(배열)을 반환합니다.
  • replace() 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다.
  • replaceAll() 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다.
  • concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다.
  • repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다.
  • padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다.
  • padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다.
  • trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
  • trimEnd() 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • toUpperCase() 메서드는 문자열을 대문자로 설정하고, 대문자 문자열을 반환합니다.
  • toLowerCase() 메서드는 문자열을 소문자로 설정하고, 새로운 문자열을 반환합니다.
  • toString() 메서드는 데이터를 문자열로 변환하고, 문자열을 반환합니다.
  • localeCompare() 메서드는 문자열과 문자열을 비교하여, 수치(음수, 양수, 0)을 반환합니다.

문자열 검색과 관련된 메서드

  • indexOf() 메서드는 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
  • lastIndexOf() 메서드는 문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
  • search() 메서드는 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
  • match() 메서드는 문자열(정규식)을 검색하고, 문자열(배열)을 반환합니다.
  • matchAll() 메서드는 문자열(정규식)을 검색하고, 일치하는 모든 문자열(배열)을 반환합니다.
  • at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
  • charAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 단일문자를 반환합니다.
  • charCodeAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
  • charPointAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 포인트 정수 값을 반환합니다.
  • includes() 메서드는 문자열 포함 여부를 검색하여, 그 결과를 불린(true, false)로 반환합니다.
  • startsWith() 메서드는 시작하는 문자열에서 특정 문자열로 시작하는 확인하여, 그 결과를 불린(true, false)로 반환합니다.
  • endsWith() 메서드는 끝나는 문자열에서 특정 문자열로 끝나는지 확인하여, 그 결과를 불린(true, false)로 반환합니다.

예제1(Sample)

문자열을 검색하여, 주어진 값과 일치하는 첫 번째 값을 반환하는 예제입니다.

const str = javascript reference

클릭하면 여기에 정보가 나옵니다.

HTML
CSS
SCRIPT
<div class="charAt-box">
    <span>javascript</span>
    <p class="alert">클릭하면 여기에 정보가 나옵니다.</p>
</div>
#sample1 .indexof-box {
    text-align: center;
}
#sample1 .indexof-box .alert {
    padding-top: 10px;
}
#sample1 .indexof-box span {
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
    display: inline-block;
    margin-bottom: 10px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    border-radius: 40px;
}
#sample1 .indexof-box em {
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    padding: 2px 5px;
}
#sample1 .indexof-box strong {
    border-bottom: 1px solid #000;
}
const text = document.querySelector(".indexof-box .text").innerText;    //javascript
const btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".indexof-box .alert");

btnAll.forEach(btn => {
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        const char = "."+btn.innerText.trim();     //클릭한 버튼의 글씨
        const result = eval("'"+text+"'"+char)

        btnAlert.innerHTML = `str${char} : 결과값 : <em>[${result}]</em>`;
    });
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
split()

참고(Reference)


댓글