UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

JS 문자열 내장함수 - slice/indexOf/substr/replace/split - 자바스크립트

클로이겅쥬 2022. 1. 18. 14:45
반응형

 

 

 

 

 

 

 

 

 

1. indexOf( ) - 찾고자하는 문자열의 위치 반환

2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환

3. substr( ) - 문자열에서 특정 부분 잘라냄

4. replace( ) - 문자열에서 특정 문자값 바꿔치기

5. split( ) - 문자열을 배열로 반환

 

 

 

 

 

 

 

 

 

1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환

const txt = "Hello World";
console.log(txt.indexOf("apple")); // -1

 

apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다.

만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환.

 

indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다.

 

 

 

 

 

 

 


2. 문자열.slice() - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환

const txt = "Hello World";
const txt1 = txt.slice(0, 5); // 0번째에서부터 5번째까지 txt 자른후, 새로운 문자열로 반환
console.log(txt1); // Hello

 

 

 

 

 

 


3. 문자열.substr() - 문자열에서 특정 부분 잘라냄

 

const txt = "Hello World";
const txt1 = txt.substr(6,3); //6번째 글 부터 그 후 3번째까지 잘라내기
console.log(txt1) // Wor

 

.substr()은 만약 글자 수가 50개 넘어가는 긴 문장이 있다면, 40개 이후로 '...'로 처리하는 기능으로도 사용많이한다.

아래에 말 줄임표 기능 스크립트를 짜보자.

 

const origin = "나비야 나비야 이리나라 오너라 호랑나비 흰나비 춤을 추며 오너라"
let result = '';

if(origin.length > 16){
	resualt = origin.substr(0,16)+"...";	
}else{
	result = origin;
}

console.log(result); // 나비야 나비야 이리나라 오너라...



// 삼항연산자 함축형으로 표현
(origin.length > 16) ? resualt = origin.substr(0,16)+"..." : result = origin;

 

 

 

 

 

 


4. 문자열.replace() - 문자열에서 특정 문자값 바꿔치기

const intro = "우리 Abc회사는 높은 품질의 제품을 만들고 
Abc회사 브랜드 가치를 높이기위해 노력하고있습니다. 샬라샬라~ "

const newIntro = intro.replace("Abc", "Cde");
console.log(newIntro) 
// "우리 Abc회사는 높은 품질의 제품을 만들고 Abc회사 브랜드 가치를 높이기위해 노력하고있습니다."


.replace()의 단점은 처음 글자만 변경된다. 전부 한번에 바꾸기위해서는 정규표현식을 써야한다.

const newIntro = introduce.replace(/Abc/g, "Cde");
// 'g'는 글로벌(전체)이라는 의미

const newIntro = introduce.replace(/AAA/ig, "Cde");
// 대수문자 구분없이 바꾸고싶을때는 'i'를 추가

 

 

 

 

 

 

 

5. 문자열.split() - 문자열을 배열로 반환

const colors = "red green blue";
const arr = colors.split(",");
console.log(arr); // red, green, blue -> ',' 기준으로 배열로 변환

 

 

 

 

 

 

 

반응형