자바스크립트에서 문자열 안의 문자 또는 단어를 추출하는 4가지 방법을 소개합니다. String에서 특정 문자 1개만 추출하거나, 어떤 범위의 문자들을 추출할 수 있습니다. 또는 특정 구분자를 기준으로 문자열을 분리하고, 원하는 문자열(단어)를 추출할 수도 있습니다.
1. charAt() : 문자열에서 문자 추출
String.charAt(Index)는 문자열에서 Index에 해당하는 문자 1개를 리턴합니다. 따라서, 특정 Index의 문자를 가져올 수 있습니다. 리턴되는 객체의 타입은 string입니다.
const str = "Hello, World, Javascript";
let ch = str.charAt(0);
console.log(ch);
ch = str.charAt(7);
console.log(ch);
ch = str.charAt(14);
console.log(ch);Output:
H
W
J2. substring() : 문자열에서 특정 범위의 문자열(단어) 추출
String.substring(start, end)은 인자로 전달된 Index, start를 포함하고 end를 포함하지 않는 범위의 문자열을 잘라서 리턴합니다. 예를 들어 substring(0, 5)는 Index 0에서 4까지의(Index 5를 포함하지 않는) 문자열을 잘라서 리턴합니다. 그리고, substring(start)처럼 인자로 start만 전달하면 start부터 문자열 마지막까지 잘라서 리턴합니다.
const str = "Hello, World, Javascript";
let word = str.substring(0, 5);
console.log(word);
word = str.substring(7, 12);
console.log(word);
word = str.substring(14, str.length);
console.log(word);
word = str.substring(14);
console.log(word);Output:
Hello
World
Javascript
Javascript3. slice() : 문자열에서 특정 범위의 문자열(단어) 추출
String.slice(start, end)도 substring()과 동일하게 인자로 전달된 범위에 해당하는 문자열을 잘라서 리턴합니다. 아래의 예제는 위의 예제에서 단순히 substring을 slice로 변경한 것이고 결과는 동일합니다.
const str = "Hello, World, Javascript";
let word = str.slice(0, 5);
console.log(word);
word = str.slice(7, 12);
console.log(word);
word = str.slice(14, str.length);
console.log(word);
word = str.slice(14);
console.log(word);Output:
Hello
World
Javascript
Javascriptslice()와 substring()은 비슷하지만 미묘한 차이점이 있습니다. 자세한 내용은 JavaScript - substring()과 slice()의 차이점를 참고해주세요.
4. split() : 구분자로 여러 문자열로 분리, 원하는 문자열 추출
String.split(delimiter)는 인자로 전달된 구분자를 기준으로 문자열을 분리하여 배열로 리턴합니다. 아래 예제에서 split()이 리턴한 배열을 보면, 문자열에 공백이 포함되어있습니다. ,로 자르기 때문에 앞 뒤의 공백이 함께 문자열에 포함될 수 있기 때문입니다. 구분자 앞, 뒤로 공백이 있는 경우, map()으로 배열의 모든 요소들을 순회하면서 trim()을 호출하여 공백을 제거해줄 수도 있습니다.
const str = "Hello, World, Javascript";
let words = str.split(',');
console.log(words);
words = words.map(element => element.trim());
console.log(words);
console.log(words[0]);
console.log(words[1]);
console.log(words[2]);Output:
[ 'Hello', ' World', ' Javascript' ]
[ 'Hello', 'World', 'Javascript' ]
Hello
World
Javascript구분자가 :인 경우, 아래와 같이 split(':')으로 분리해주면 됩니다.
const str = "Hello:World:Javascript";
let words = str.split(':');
console.log(words);Output:
[ 'Hello', 'World', 'Javascript' ]Related Posts
- ESLint warning, Expected '===' and instead saw '==' eqeqeq
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화