JavaScript - String 내장함수 정리

많이 사용 되는 String 내장함수에 대해 정리해보고자합니다!

내장 함수란?
프로그래밍 안에서 별도로 import 없이 사용 할 수 있는 함수

---

length : 문자열의 길이를 리턴

→ ex) 문자열.length;

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(txt.length);  // 26

---

indexOf() / serch() : 문자열의 위치를 찾아 리턴, 찾지 못 할 시 -1을 리턴

→ ex) 문자열.indexOf(찾고 싶은 문자열);

→ ex) 문자열.search(찾고 싶은 문자열);

var str = "Please locate where 'locate'";
console.log(str.indexOf("locate"));  // 7
console.log(str.indexOf("jisu"));  // -1

locate가 str에 두 번 들어 있지만 처음으로 발견한 위치인 7을 return함

---

slice : 문자열을 원하는 만큼 잘라서 리턴

→ ex) 문자열.slice(원하는 index);

var str = "Apple, Banana, Kiwi";
console.log(str.slice(7,13)); // 출력은 12번까지  // 출력값 : Banana          
console.log(str.slice(7));    // 7부터 끝까지     // 출력값 : Banana, Kiwi
console.log(str.slice(-12, -6));                // 출력값 : Banana
console.log(str.slice(-12));                    // 출력값 : Banana, Kiwi

---

substring() : 문자열을 원하는 만큼 잘라서 리턴

→ ex) 문자열.substring(시작 인덱스, 끝 인덱스);

var str = "Apple, Banana, Kiwi";
console.log(str.substring(7,13));  // 출력값 : Banana
console.log(str.substring(7));     // 출력값 : Banana, Kiwi
console.log(str.substring(-3));    // 출력값 : Apple, Banana, Kiwi
console.log(str.substring(5, -3)); // 출력값 : Apple

slice와 substring의 차이점은 입력값으로 음수가 들어왔을 때 있다.
slice는 음수가 들어왔을 때 음수 인덱스를 적용하여 리턴하지만
substring은 음수가 들어오면 해당 인덱스를 0으로 적용한다.

---

substr() : 특정 인덱스부터 원하는 길이만큼 잘라서 리턴

→ ex) 문자열.substr(시작 인덱스, 원하는 길이);

var str = "Apple, Banana, Kiwi";
console.log(str.substr(7,6));  // 출력값 : Banana

---

replace() : 문자열 치환, 특정 문자열을 원하는 문자열로 변환

→ ex) 문자열.replace("a", "B");

var str1 = "Plese visit here";
var str2 = str1.replace("here", "there");  // 출력값 : Plese visit there

문제점

var str5 = "Please visit here here here";
var str2 = str1.replace("here", "there");
// 출력값 : Plese visit there here here

바꾸고자 하는 특정 문자열이 여러개 있는 경우 첫번째로 만나는 문자열만 치환하게 된다.
이러한 경우에는 정규 표현식을 사용하면 해결 된다.

정규 표현식 사용

var str5 = "Please visit here here here";
var str6 = str5.replace(/here/g, "there");  // g = globa : 모든 "there"에 적용

var str7 = "Please visit Here HERE here";
var str8 = str7.replace(/here/gi, "there");  // i = ignore : 대소문자 무시

---

toUpperCase() : 대문자로 변환

→ ex) 문자열.toUpperCase();

var str9 = "Please visit Here HERE here";
console.log(str9.toUpperCase());
// 출력값 : PLEASE VISIT HERE HERE HERE

toLowerCase() : 소문자로 변환

→ ex) 문자열.toLowerCase();

var str9 = "Please visit Here HERE here";
console.log(str9.toUpperCase());
// 출력값 : PLEASE VISIT HERE HERE HERE

---

concat() : 문자열끼리 합침

→ ex) 문자열1.concat(문자열2));

var txt1 = "Hello";
var txt2 = "World";
console.log(txt1.concat(" ", txt2));            //  출력값 : Hello World
console.log(txt1.concat(" ", " Love ", txt2));  //  출력값 : Hello Love World

---

padStart() : 현재 문자열의 시작을 다른 문자로 채워, 주어진 길이로 만듦

→ ex) 문자열padStart(원하는 길이, 채울 문자);

var str11 = "1234";
console.log(str11.padStart(8,0));  		   //  출력값 : 00001234
console.log("C-" + str11.padStart(8,0));   //  출력값 : C-00001234

padEnd() : 현재 문자열의 끝을 다른 문자로 채워, 주어진 길이로 만듦

→ ex) 문자열.padEnd(원하는 길이, 채울 문자);

var str11 = "1234";
console.log(str11.padEnd(8,0));  		   //  출력값 : 12340000
console.log("C-" + str11.padEnd(8,0));     //  출력값 : C-12340000

---

charAt() : 문자열에서 특정 인덱스에 위치하는 문자를 리턴함

→ ex) 문자열charAt(인덱스);

var str13 = "Hello World";
console.log(str13.charAt(1));			// 출력값 : e

---

split() : 구분자로 문자열을 분리하여 배열로 리턴

→ ex) 문자열.split(구분자);

var tags = "키보드,기계식,블루투스";
var arr1 = tags.split(",");
// 출력값 : ['키보드', '기계식', '블루투스']

---

많이 사용하게 되기 때문에 저도 기억해두려고 노력하고 있어요!

자유자재로 사용할 수 있도록 더 힘내겠습니다

글 읽어주셔서 감사합니다!