자바스크립트 문자열 메소드 String Methods

자바스크립트 문자열에서 사용 가능한 다양한 메소드 등을 알아보겠습니다.

 

1. 특정 문자열 추출

아는 분은 이미 계시겠지만, 문자열의 길이는 length로 표현할 수 있습니다.

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
txt.length     //리턴값은 26

문자가 길 경우, 특정 문자열은 어떻게 추출할 수 있을까요?

 

바로 아래의 메소드를 사용할 수 있습니다. 

slice(start, end)
substring(start, end)
substr(start, length)

사용법은 아래와 같습니다. 특히 자바스크립트의 인덱스는 0부터 시작하는 점을 주의하고 사용하세요!

slice 메소드의 인자로는 시작 인덱스와 끝나는 인덱스가 오게되며, 음수로도 인자값을 받을 수 있습니다. substring 메소드는 slice 메소드와 거의 같지만, 인자로 음수가 올 수는 없습니다.

substr 메소드 또한 slice와 비슷하지만, 두 번째 인자로는 문자열의 길이값이 오게됩니다.

1. slice
let str = "Apple, Banana, Kiwi";
str.slice(7, 13)     // Returns Banana
str.slice(-12, -6)    // Returns Banana 음수는 뒤에서부터 계선
str.slice(7);    // Returns Banana,Kiwi 2번째 인자 생략시 0~6으로 인식.
str.slice(-12)    // Returns Banana,Kiwi

2. substring
let str = "Apple, Banana, Kiwi";
substring(7, 13)    // Returns Banana

3. substr
let str = "Apple, Banana, Kiwi";
str.substr(7, 6)    // Returns Banana
str.substr(7)    // Returns Banana,Kiwi
str.substr(-4)    // Returns Kiwi

반응형

2. 문자열 바꾸기

 

replace 메소드를 이용하면, 원하는 문자열을 서로 치환할 수 있습니다. replace 메소드는 기존 문자열을 불러 오는 것이 아니라, 치환 후에 새로운 문자열을 반환합니다. 그리고 치환 시 처음에 매치되는 것만 치환합니다. 

또한 당연하겠지만, 영어의 경우에는 대소문자를 구분합니다.

let text = "안녕하세요 선생님! 선생님보러 왔어요!"; 
let newText = text.replace("선생님", "사장님");
리턴값: "안녕하세요 사장님! 선생님보러 왔어요!"; //2번째 선생님은 치환되지 않음!

 

대소문자에 신경쓰고 싶지 않다면, 정규표현식 /i 플래그를 사용하면 됩니다. 정규표현식을 사용할 때는 따옴표를 붙이지 않습니다.

let text = "Hi Teacher!";
let newText = text.replace(/TEACHER/i, "Boss");

매치되는 모든 문자를 바꾸고 싶을 때도 정규표현식 /g 플래그를 사용합니다.

let text = "Hi Teacher! I'm here to see you my Teacher!";
let newText = text.replace(/Teacher/g, "Boss");

 

3. 대문자, 소문자 바꾸기

 

자바스크립트 메소드에는 대소문자를 바꿀 수 있는 함수가 있습니다.

toUpperCase 및 toLowerCase 를 사용하면, 원하는 대소문자로 치환이 가능합니다.

let text1 = "Hello World!";     
let text2 = text1.toUpperCase(); //"HELLO WORLD!" 
let text3 = text1.toLowerCase(); //"hello world!"

4. 문자열 합치기

 

문자열 끼리 더하면 문자열이 되는 것은 모두들 아시죠? 이를 메소드로 구현할 수도 있습니다. concat 메소드는 문자열을 합쳐주는 역할을 합니다.

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

 

5. 공백 제거 및 문자열 채우기

 

trim 메소드는 공백을 제거하는 역할, padStart, padEnd는 부족한 문자열 자리를 0으로 채워서 문자열의 길이를 맞춰주는 역할을 합니다. 특히 padStart, padEnd 메소드는 인터넷 익스플로러에서는 지원이 되지 않으니 참고 바랍니다.

let text = "       Hello World!        ";
text.trim()    // Returns "Hello World!"

let text = "5";
text.padStart(4,0)    // Returns 0005

let text = "5";
text.padEnd(4,0)     // Returns 5000

 

6. charAt, charCodeAt 메소드

 

이 두개의 메소드는 원하는 인덱스에 해당하는 문자열이나 유니코드 값을 추출할 때 사용됩니다. 여기서 반환되는 UTF-16 코드는 특정 문자열의 인덱스 값을 0~65535 사이의 정수로 나타낸 코드입니다.

let text = "HELLO WORLD";
text.charAt(0)          //H 반환
text.charCodeAt(0)       //유니코드값 72 반환

 

7. 문자열을 배열로 전환

 

split 메소드를 사용하면, 콤마, 파이브, 따옴표 등을 기준으로 문자열을 나누고, 이를 배열로 만들 수 있습니다.

let text = "사탕, 캐러멜, 젤리"
text.split(",")    //['사탕', ' 캐러멜', ' 젤리']        
text.split(" ")    //['사탕,', '캐러멜,', '젤리'] <- 콤마까지 포함     
text.split("|")    //['사탕, 캐러멜, 젤리']
text.split("")     // ['사', '탕', ',', ' ', '캐', '러', '멜', ',', ' ', '젤', '리']

match 메소드는 문자열에서 정규 표현식과 일치하는 항목을 검색하고, 일치하는 항목을 Array 객체로 반환합니다.

let text = "아기 토끼가 숲 속에서 아기새와 아기 강아지랑 놀고 있네요!";
text.match(/아기/g); //반환값: ['아기', '아기', '아기']

 

8. 문자열의 인덱스 찾기

 

indexOf, lasIndexOf, search 메소드를 통해서 문자열을 어떻게 찾는지 알아보겠습니다. 먼저 indexOf는 문자열에서 지정된 텍스트가 처음으로 나타나는 인덱스를 리턴합니다. lastIndexOf는 문자열에서 지정된 텍스트가 마지막으로 나타나는 인덱스를 반환합니다. search 메소드는 문자열에서 지정된 값을 검색하고 일치하는 위치의 인덱스를 반환합니다.

 

indexOf, lastIndexOf 메소드에서는 두 번쨰 인자로 시작 위치를 지정할 수 있습니다.

search 메소드는 시작 위치를 정하는 두 번째 인수를 사용할 수 없으며, indexOf 메소드는 정규 표현식을 사용할 수 없습니다.

1. indexOf
let str = "Please help me! someone help me!";
str.indexOf("help");    //리턴값은 7
str.indexOf("help", 20); //리턴값은 24

2. lastIndexOf
let str = "Please help me! someone help me!";
str.lastIndexOf("help"); //리턴값은 24
str.lastIndexOf("help", 20); //리턴값은 7

3. search
let str = "Please help me! someone help me!";
str.search("help");  //리턴값은 7
str.search("help", 15);  //두 번째 인수 사용 불가! 리턴값은 7

 

9. 논리값 반환

 

Include 메소드는 문자열에 지정된 값이 포함되어 있으면 true를 반환하게 됩니다.

startsWith, endsWith 메소드는 문자열이 지정된 값으로 시작하거나 끝나면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 특히, startsWith, endsWith 메소드에는 두 번째 인자 값으로 검색을 시작할 위치나 검색을 끝낼 위치를 지정할 수 있습니다. 

let text = "세상은 넓고 아름답습니다!";
text.includes("스")    // Returns false

let text = "세상은 넓고 아름답습니다!";
text.includes("고")    // Returns true

let text = "세상은 넓고 아름답습니다!";
text.startsWith("세")  // Returns true
text.startsWith("세", 5) //Returns false

let text = "세상은 넓고 아름답습니다!";
text.endsWith("다")   // Returns true
text.endsWith("다", 10)   // Returns false