[Javascript] string 메소드

 

알고리즘 문제를 풀다보면 메소드 관련이 많이 나와 헷깔리는 부분이 많았다.

더 나은 문제풀이와 커리어를 쌓기위해 메소드를 정리하도록 마음 먹었다.

 

 

 

---

 

💖 자바스크립트 String.prototype 메소드 종류

String 메소드는 String 객체에 정의된 문자열과 관련된 작업을 할 때 사용하는 메소드입니다.

 

메소드	설명
indexOf()	String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf()	String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함.
charAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함.
charCodeAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환함. (0 ~ 65535)
charPointAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트(unicode code point)를 반환함.
slice()	String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substring()	String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substr()	String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환함.
split()	String 인스턴스에서 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환함.
concat()	String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환함.
toUpperCase()	String 인스턴스의 모든 문자를 대문자로 변환한 새로운 문자열을 반환함.
toLowerCase()	String 인스턴스의 모든 문자를 소문자로 변환한 새로운 문자열을 반환함.
trim()	String 인스턴스의 양 끝에 존재하는 공백과 모든 줄 바꿈 문자(LF, CR 등)를 제거한 새로운 문자열을 반환함.
search()	인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함
replace()	인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환함.
match()	인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 반환함.
includes()	인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환함.
startsWith()	인수로 전달받은 문자나 문자열로 시작되는지를 검사한 후 그 결과를 불리언 값으로 반환함.
endsWith()	인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 불리언 값으로 반환함.
toLocaleUpperCase()	영문자뿐만 아니라 모든 언어의 문자를 대문자로 변환한 새로운 문자열을 반환함.
toLocaleLowerCase()	영문자뿐만 아니라 모든 언어의 문자를 소문자로 변환한 새로운 문자열을 반환함.
localeCompare()	인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수 값으로 반환함.
normalize()	해당 문자열의 유니코드 표준화 양식(Unicode Normalization Form)을 반환함.
repeat()	해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환함.
toString()	String 인스턴스의 값을 문자열로 반환함.
valueOf()	String 인스턴스의 값을 문자열로 반환함.

 

 

 

 

---

 

✨ String.prototype 메소드

모든 String 인스턴스는 String.prototype으로부터 메소드와 프로퍼티를 상속받습니다.

이렇게 상속받은 String.prototype 메소드를 이용하면, 다음과 같은 문자열 작업을 할 수 있습니다.

 

1. 문자열에서의 위치 반환

2. 문자열에서 지정된 위치에 있는 문자 반환

3. 문자열 추출

4. 문자열 분리

5. 문자열 결합

6. 문자열의 대소문자 변환

7. 문자열 주위의 공백 제거

8. 정규 표현식을 이용한 문자열 조작

 

String 인스턴스의 값은 변경될 수(immutable) 없으므로, 모든 String 메소드는 결괏값으로 새로운 문자열을 생성하여 반환합니다.

 

 

 

 

---

 

📑 문자열에서의 위치 찾기

다음 메소드는 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환합니다.

 

🔊 indexOf() 함수 

string.indexOf(searchElement(필수), fromIndex(옵션))

 

문자열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는  '첫번째' element의 index를 리턴합니다. 

만약, 찾으려는 값이 문자열에 없으면 -1을 리턴합니다.

fromIndex를 파라미터로 전달하면, fromIndex부터 값을 찾습니다.

 

 

[파라미터]

- searchElement : 필수 입력값, 찾을 문자열

- fromIndex : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치

 

[리턴값]

배열에서 searchElement와 값이 정확하게 일치하는 첫번째 index를 리턴합니다.

찾으려는 값이 배열에 없으면 -1을 리턴합니다.

 

const str = "abcDEFabc";

str.indexOf('abc');     // 0  -> 자바스크립트에서 인덱스는 0부터 시작함.
str.indexOf('abcd');    // -1 -> 문자열을 비교할 때 문자의 대소문자를 구분함.
str.indexOf('abc', 3);  // 6  -> 인덱스 3부터 'abc'를 찾기 시작함.

 

🔊 lastIndexOf() 함수 

string.lastIndexOf(searchElement(필수), fromIndex(옵션))

 

문자열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는 '마지막' element의 index를 리턴합니다.

만약, 찾으려는 값이 문자열에 없으면 -1을 리턴합니다.

 

fromIndex를 파라미터로 전달하면,

fromIndex부터 역방향으로(index값을 줄여나가면서) searchElement와 같은 값을 찾아서 첫번째로 같은 값을 가지는 index를 리턴합니다.

 

fromIndex값이 입력되지 않으면, 기본값은 (문자열의 길이-1) 입니다

 

즉, fromIndex값을 입력하지 않으면, lastIndexOf 함수는 배열의 끝에서부터 역방향으로 배열을 탐색하여

searchElement와 같은 값을 가지는 최초의 index값을 리턴하는 것입니다.

 

 

[파라미터]

- searchElement : 필수 입력값, 찾을 문자열

- fromIndex : 검색을 시작할 index. 입력하지 않으면 arr.length-1 index부터 검색을 시작합니다.

 

[리턴값]

문자열에서 searchElement와 값이 정확하게 일치하는 마지막 index를 리턴합니다.

찾으려는 값이 문자열에 없으면 -1을 리턴합니다.

 

const str = "abcDEFabc";

str.lastIndexOf('abc'); // 6
str.lastIndexOf('d');   // -1
str.lastIndexOf('c');   // 8

str.lastIndexOf('abc', 1); // 0
str.lastIndexOf('c', 2);   // 2

 

 

 

 

 

---

 

📑 문자열에서 지정된 위치에 있는 문자 반환

다음 메소드는 String 인스턴스에서 전달받은 인덱스에 위치한 문자나 문자 코드를 반환합니다.

🔊 charAt() 함수

string.charAt(index(필수))

 

charAt 함수는 주어진 문자열의 index 위치의 문자를 읽어서 리턴합니다.

index는 0부터 시작합니다.

index 값이 입력되지 않으면, index 값은 자동으로 0으로 지정됩니다.

 

 

[파라미터]

index - 0보다 큰 정수

 

[리턴값]

charAt은 index로 주어진 값에 해당하는 문자를 리턴한다.

 

const str = "abcde";

str.charAt(); // a
str.charAt(0); // a
str.charAt(str.length-1); // e
str.charAt(9999); // ''(공백)

 

🔊 charCodeAt() 함수

string.charCodeAt(index(필수))

 

charCodeAt()은 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환합니다.. (0 ~ 65535)

 

[아스키 코드 일부]

숫자 : (0)48 ~ (9)57 (10개)
대문자 : (A)65 ~ (Z)90까지 (26개)
소문자 : (a)97 ~ (z)122 (26개)

 

[파라미터]

index - 0보다 큰 정수

 

[리턴값]

charAt 는 index에 해당하는 문자를 리턴하고, chartCodeAt은 UTF-16 값을 리턴하는 차이가 있다.

주어진 인덱스에 대한 UTF-16 코드를 나타내는 0 부터 65535 사이의 정수를 반환합니다 

범위 밖으로 넘어갔을 경우 NaN (charAt의 경우 " " 빈 문자열 반환) 

 

const str = "1Youngseo";

str.charCodeAt(0); // 49
str.charCodeAt(1); // 89
str.charCodeAt(2); // 117
str.charCodeAt(7); // 111
str.charCodeAt(99); // NaN

// index를 적지 않는다면? -> 맨 앞의 문자의 아스키코드를 리턴한다.
str.charCodeAt(); // 49

 

🔊 charPointAt() 함수

string.charPointAt(index(필수))

* codePointAt() 메소드는 사파리, 익스플로러에서 지원하지 않습니다.

 

유니코드는 모든 시스템에서 일관되게 문자를 표현하기 위한 산업표준이다.

charPointAt()은 인덱스에 위치한 문자의 UTF-16 코드를 반환합니다. (0 ~ 65535)

 

[파라미터]

index - 0보다 큰 정수

 

[리턴값]

인덱스에 위치한 문자의 UTF-16 코드를 반환합니다.

 

 

 

 

 

---

 

📑 문자열 추출

다음 메소드는 String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환합니다.

🔊 slice() 함수

string.slice(start(필수), end(옵션))

 

문자열에서 첫번째 인자와 두번째 인자 사이에 해당하는 문자열을 검색해서 리턴한다.
두번째 인자(end)를 지정하지 않으면 문자열의 끝까지를 검색대상으로 한다.

 

slice() 함수의 파라미터로 음수값이 전달되면,  string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급합니다.
string의 길이보다 파라미터로 전달된 음수의 절대값이 더 크다면, 음수는 단순히 0으로 처리됩니다.

 

 

[파라미터]

start - 검색구간의 시작지점.

end - 검색구간의 종료지점, 지정하지 않으면 string.length-1을 입력한 것과 같음

 

[리턴값]

두번째 인자(end)를 지정하지 않으면 문자열의 끝까지를 검색대상으로 한다.

 

문자열에서 첫번째 인자(start)의 index와 두번째 인자(end)의 index 이전 사이에 해당하는 문자열을 검색해서 리턴한다.

 

const str = "안녕하세요?"

//두번째 인자(end)를 지정하지 않으면 문자열의 끝까지 출력
str.slice(0); //안녕하세요?
str.slice(3); //세요?

//첫번째 인자의 index와 두번째 인자의 index 이전 사이출력
str.slice(0, 1); //안
str.slice(1, 2); //녕
str.slice(str.length-1, str.length); // ? (5, 1)

 

//첫번째 인자(start)의 index > 두번째 인자(end)의 index, 빈문자열 출력
str.slice(2, 1); // " "
str.slice(1, 0); // " "

//start과 end가 같으면 빈문자열 출력
str.slice(2, 2); // " "

 

//start값이 -음수입니다. string의 뒤에서 2번째자리를 start값으로 index로 취급.
str.slice(-2, 6); //요?  ===  slice(4, 6)

//end값이 음수입니다. end값은 string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급.
str.slice(0, -2) //안녕하세 === slice(0, 4)

//string의 길이보다 파라미터로 전달된 음수의 절대값이 더 크다면, 음수는 단순히 0으로 취급.
str.slice(-10, 6) //안녕하세요? === slice(0, 6)
str.slice(0, -10) //  === slice(0, 0)

 

🔊 substring() 함수

string.substring(start(필수), end(옵션))

 

substring()함수는 substr() 함수와 같이 특정 문자열을 잘라내여 반환합니다.

 

substr() 함수와 다른 점은 매개변수로 잘라내고 싶은 문자열의 start index와 end index를 전달한다는 것입니다.

substr() 함수와 마찬가지로 index는 0부터 시작합니다.

[파라미터]

start - 탐색구간의 시작점(index)

end - 탐색구간이 끝나는 점, 0 index부터 시작됨

 

[리턴값]

두번째 인자(end)를 지정하지 않으면 문자열의 끝까지를 검색대상으로 한다.

 

첫번째 인자(start)의 index > 두번째 인자(end)의 index, start가 end 보다 크면 end부터 start사이의 문자열을 리턴한다.

첫번째 인자(start)의 index < 두번째 인자(end)의 index, start가 end 보다 작으면 start부터 end사이의 문자열을 리턴한다.

첫번째 인자(start)와 두번째 인자(end)가 같으면 빈문자열을 리턴한다.

 

const str = "안녕하세요?"

//두번째 인자(end)를 지정하지 않으면 문자열의 끝까지 출력
str.substring(0); //안녕하세요?
str.substring(3); //세요?

//첫번째 인자(start)의 index > 두번째 인자(end)의 index, end부터 start사이의 문자열 출력
str.substring(0, 1); //안
str.substring(1, 2); //녕
str.substring(str.length-1, str.length); //?

//첫번째 인자(start)의 index < 두번째 인자(end)의 index, start부터 end사이의 문자열 출력
str.substring(2, 0); //안녕
str.substring(5, 2); //하세요

//첫번째 인자(start)와 두번째 인자(end)가 같으면 빈문자열 출력
str.substring(0, 0) //
str.substring(2, 2) //

 

//start값이 -음수입니다. 음수면 상관없이 start값을 0으로 처리
str.substring(-2, 6) // 안녕하세요? === substring(0, 6)
str.substring(-10, 6) // 안녕하세요? === substring(0, 6)

//end값이 -음수입니다. 음수면 상관없이 end값을 0으로 처리
str.substring(0, -6) // ==== substring(0, 0)
str.substring(0, -6) //  ==== substring(0, 0)

 

🔊 substr() 함수

string.substr(start(필수), length(옵션))

 

substr() 함수는, 파라미터로 입력받은 start index부터 length 길이만큼 string을 잘라내어 반환하는 함수입니다.

첫번째 글자의 index는 0에서 시작합니다.

 

 

[파라미터]

start - 탐색구간의 시작점(index)

length - 탐색구간이 끝나는 점(index), start+length 위치까지를 탐색구간으로 설정함

 

[리턴값]

length를 지정하지 않으면 start에서부터 문자열 전체를 처리구간으로 간주한다.

 

문자열 중 첫번째 인자(start)의 index부터 두번째 인자(length)까지의 구간에 해당하는 문자열을 반환한다. 

start가 양수일 경우, 두번째 인자(length)가 문자의 길이 보다 작으면 빈문자열이 리턴된다.

start가 음수일 경우, start의 index는 문자열의 뒤에서부터 시작된다.

 

const str = "안녕하세요?"

//length를 지정하지 않으면 start에서부터 문자열 전체 출력
str.substr(0); //안녕하세요
str.substr(3); //세요?

// 첫번째 인자(start)의 index부터 두번째 인자(length)까지의 구간에 해당하는 문자열을 출력
str.substr(0, 1); //안
str.substr(1, 1); //녕
str.substr(str.length-1, 1); //? === substr(5, 1)
str.substr(0, 2); //안녕
str.substr(1, 3); //녕하세

 

//start값이 -음수입니다. string의 뒤에서 2번째자리를 start값으로 index로 취급.
str.substr(-2, 6) //요? === substr(4, 6)

//start가 양수일 경우, 문자의 길이 보다 작으면 빈문자열이 리턴된다.
str.substr(0, -2) //  === substr(0, 0)
str.substr(0, -10) //  === substr(0, 0)

//string의 길이보다 파라미터로 전달된 음수의 절대값이 더 크다면, 음수는 단순히 0으로 취급.
str.substr(-10, 6) //안녕하세요? === substr(0, 6)

 

 

 

 

 

---

 

📑 문자열 분리

다음 메소드는 String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환합니다.

🔊 split() 함수

string.split(separator(옵션), limit(옵션))

 

split() 메소드는 인수로 구분자를 전달하지 않으면, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환합니다.

 

[파라미터]

separator - 문자열을 분리하는 기준 문자열, 사용하지 않으면 전체 문자열을 하나의 원소로 담고 있는 배열을 리턴한다

limit - 리턴되는 배열의 숫자를 제한

 

[리턴값]

array, 첫번째 인자(separator)를 기준으로 분리된 문자열들을 원소로 가지고 있는 배열.

 

const str = "자바스크립트는 너무 멋져요! 그리고 유용해요.";

str.split();    // ['자바스크립트는 너무 멋져요! 그리고 유용해요.']
str.split("");  // ['자', '바', '스', '크', '립', '트', '는', ' ', '너', '무', ' ', '멋', '져', '요', '!', ' ', '그', '리', '고', ' ', '유', '용', '해', '요', '.']
str.split(" "); // ['자바스크립트는', '너무', '멋져요!', '그리고', '유용해요.']
str.split("!"); // ['자바스크립트는 너무 멋져요', ' 그리고 유용해요.']

str.split("", 3); //['자', '바', '스']
str.split(" ", 2); //['자바스크립트는', '너무']

 

 

 

 

 

---

 

📑 문자열 결합

다음 메소드는 String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환합니다.

🔊 concat() 함수

string.concat(str1(필수), str2.....strN(옵션)).

 

[파라미터]

str1 -  연결할 문자열

str2 ... strN - 연결할 문자열

 

[리턴값]

str1과 strN을 합친 값을 리턴한다. 문자열들 값은 변경되지 않는다.

concatenation(접합)의 줄임말

 

//기본 예제
const result = 'Hello'.concat(' ', 'world', '!');
console.log(result); // Hello world!

s1="생활"
s2="코딩"
s3="-"
s4="자바스크립트로 배우는 프로그래밍"
s5=s1.concat(s2,s3,s4) //생활코딩-자바스크립트로 배우는 프로그래밍

 

//파라미터로 문자열 이외의 다른 타입도 넣을 수 있습니다.
''.concat(null); // null
''.concat(1, 2); // 12
''.concat(true, false); // truefalse
''.concat({ name : 'apple'}); // [object Object]
''.concat([1, 2]); // 1,2

 

 

 

 

 

---

 

📑 문자열의 대소문자 변환

다음 메소드는 String 인스턴스의 모든 문자를 대문자나 소문자로 변환한 새로운 문자열을 반환합니다.

🔊 toUpperCase() 함수

string.toUpperCase()

 

[리턴값]

대문자로 변환된 문자열

 

'abC'.toUpperCase(); //ABC
'abCdeFg'.toUpperCase(); //ABCDEFG

 

🔊 toLowerCase() 함수

string.toLowerCase()

 

[리턴값]

소문자로 변환된 문자열

 

'abC'.toLowerCase(); //abc
'abCdeFg'.toLowerCase(); //abcdefg

 

 

 

 

 

---

 

📑 문자열 주위의 공백 제거

다음 메소드는 String 인스턴스의 양 끝에 존재하는 모든 공백과 줄 바꿈 문자(LF, CR 등)를 제거한 새로운 문자열을 반환합니다.

🔊 trim() 함수

string.trim()

 

[리턴값]

String 인스턴스의 양 끝에 존재하는 모든 공백과 줄 바꿈 문자(LF, CR 등)를 제거한 새로운 문자열을 반환합니다.

trim() 메소드는 String 인스턴스의 문자열 값 그 자체에는 영향을 주지 않습니다.

 

const str = "      JavaScript    ";

str.trim(); //JavaScript

 

 

 

 

 

---

 

📑 문자열 조작

다음 메소드는 인수로 전달받은 정규 표현식을 이용하여, String 인스턴스 값에서 검색, 대조, 대체 등의 작업을 수행합니다.

🔊 search() 함수

string.search(regexp(필수))

 

indexOf, lastIndexOf 와 다른 점은 전자가 검색대상으로 문자열을 사용하지만, search는 정규표현식을 사용합니다.

 

 

[파라미터]

regexp  - 검색 대상인 문자열의 정규표현식 패턴

 

[리턴값]

integer, 검색된 문자열의 위치(index)

 

const str="coding everybody";

str.search('e');  // 7, 인자로 문자열을 전달하면 안시적으로 정규표현식 객체로 형변환
str.search(/e/);  // 7, 정규표현식을 이용해서 위치를 검색

str.search('b'); //12
str.search(/b/); //12

 

🔊 match() 함수

string.match(regexp(필수))

 

정규표현식에 일치하는 문자열이 있는지 없는지를 확인하는 위한 용도라면 regexp.text(string)을 이용한다.

 

 

[파라미터]

regexp - 정규표현식 패턴, regular expression object가 아니면 암시적으로 regular expression object로 형변환

 

[리턴값]

정규표현식 패턴과 일치하는 문자열들을 담고 있는 배열을 리턴, 해당되는 문자열이 없을 경우 null을 리턴

 

const str="coding everybody, everywhere, everytime";
const patt1=/every.+/gi;

str.match(patt1) //[everybody, everywhere, everytime] 배열을 반환함

 

🔊 replace() 함수

string.replace(regexp|substr(필수), newSubStr(필수));

string.replace(/regexp|substr/gi(필수), newSubStr(필수));

 

문자열에서 주어진 패턴(regexp|substr)에 해당하는 부분을 새로운 데이터(newSubStr)로 치환 후 반환합니다.
인자로 주어진 값(newSubstr)은 변하지 않습니다.

 

 

[파라미터]

regexp 이나 substr - 치환대상

newString - 치환할 문자열

 

[리턴값]

string, 변경된 값을 리턴

 

const str="000님  환영합니다. hello world"; 

str.replace('000', '홍신원'); //홍신원님  환영합니다. hello world
str.replace(/000/gi, '홍신원'); //홍신원님  환영합니다. hello world

str.replace('환영합니다', '반갑습니다'); //000님  반갑습니다. hello world
str.replace(/환영합니다/gi, '반갑습니다'); //000님  반갑습니다. hello world