[Javascript] String 빌트인 객체 총정리 | String 빌트인 객체의 프로퍼티와 메서드

1. 타입 변환 목적의 용도

해당 빌트인 객체는 주로 매개변수를 String 타입으로 변환하는 용도로 사용되는데요. 이때 Number 빌트인 생성자 함수와는 달리 원본 그대로의 매개변수를 문자열로 변환합니다.

console.log(String(1)); // '1'
console.log(String(-1)); // '-1'
console.log(String(false)); // 'false'
console.log(String(NaN)); // 'NaN'
console.log(String(undefined)) // 'undefined';
console.log(String(Infinity)); // 'Infinity'

2. 유사 배열 객체로서의 특성

인스턴스를 생성하지 못하는 몇몇의 객체들을 제외하면 자바스크립트에서의 빌트인 객체들은 대부분 인스턴스를 생성할 수 있는데요. String 빌트인 객체 또한 String 타입의 인스턴스를 생성할 수 있는 생성자 함수로서의 역할이 가능한데요.

이러한 방법으로 문자열 리터럴의 값을 가진 변수를 생성하는 법은 번거롭기에, 일반적으로 생성하는 방법은 문자열 리터럴을 변수에 할당하는 간단한 방법으로도 대체가 가능합니다.

이때 생성된 문자열의 요소들은 키(인덱스)와 값(문자들)의 형태를 띈 '유사 배열 객체' 이므로, 배열 메서드를 사용하는 것 또한 가능합니다.

다만 이 경우 사용이 가능한 배열 메서드는 극히 제한적이므로 length 프로퍼티(String 빌트인 객체의 프로퍼티)와 indexOf, slice 메서드 정도만 알아두시면 편합니다.

let str = 'hello';
console.log(str.[4]); // str의 4번째 인덱스인 'o'를 반환
console.log(str.length); // 길이 5 반환
console.log(str.indexOf('e')); // 'e'의 인덱스인 1 반환
console.log(str.slice(0, 3)); // 문자열의 0번 인덱스부터 3개의 값인 'hel'을 반환합니다.

3. indexOf()

앞서 살펴본 예시와 같이 문자열의 특정 문자에 대한 인덱스를 반환합니다. 중복된 문자가 문자열에 존재할 경우 첫번째 문자에 대한 인덱스 값을 반환합니다.

이하 사용법은 배열의 indexOf와 동일합니다.

let str = 'hello world!';
console.log(str.indexOf('l')); // 문자 'l'의 첫번째 값의 인덱스인 2 반환
console.log(str.indexOf('j')); // 문자열에 해당 문자가 없을 경우 -1을 반환

4. includes()

해당 문자 및 단어가 문자열에 존재하는지에 대한 여부를 boolean 값으로 반환합니다.

let str = 'hello world!';
console.log(str.includes('l')); // 문자열에 문자 'l'가 포함되므로 true를 반환
console.log(str.includes('j')); // 문자열에 문자 'j'가 포함되지 않으므로 false를 반환

5. startsWith(), endsWith()

해당 문자가 문자열의 시작과 끝에 자리하고 있는지를 판별하여 boolean의 값을 반환하는 메서드 입니다.

let str = 'hello world!';
console.log(str.startsWith('h')); // 문자열의 시작점에 h가 위치하므로 true를 반환
console.log(str.endsWith('o')); // 문자열의 종료점에 o가 위치하고 있지 않으므로 false를 반환

6. charAt(), charCodeAt()

해당 문자열의 문자와 문자의 유니코드를 검색할 때 사용됩니다. 검색이 가능할 경우 해당 문자열의 문자값과 문자값에 해당하는 유니코드를 반환하고, 검색에 실패할 경우 charAt의 경우 빈 문자열을, charCodeAt의 경우 NaN을 반환합니다.

let str = 'hello world!';
console.log(str.charAt(1)); // 문자열의 인덱스 중 1번째 문자를 검색하여 'e'를 반환합니다.
console.log(str.charCodeAt(1)); // 문자열의 인덱스 중 1번째 문자의 값을 유니코드로 변환한 값인 101을 반환합니다.

7. subString()

문자열의 시작 인덱스(첫번째 매개변수)부터 지정된 인덱스의 범위(두번째 인덱스) 까지의 문자열을 추출하여 반환합니다.

해당 메서드는 부수 효과를 일으키지 않는 메서드 이므로 원본 문자열에는 변화가 없으며, 시작 인덱스를 음수로 지정할 경우 시작 인덱스는 문자열의 첫번째 인덱스인 0부터 시작됩니다.

let original = "Hello, World!";
let sub = original.substring(0, 5); // Hello 반환
console.log(sub); // Hello 출력
console.log(original); // Hello World 출력

8. slice()

배열 메서드인 slice와 똑같은 동작으로 작동하는 메서드입니다.

다만 첫번째 매개변수를 음수로 지정할 경우 문자열의 뒷쪽에서부터 지정이 가능하며 이때 두번째 매개변수를 지정하면 빈 문자열을 반환하므로 주의하여 사용해야 합니다.

let original = "Hello, World!";
let sub1 = original.slice(0, 5); // Hello 반환
let sub2 = original.slice(-6); // World! 반환
console.log(sub1, sub2); // Hello World! 출력
console.log(original); // 원본 문자열 변화 X

9. toUpperCase, toLowerCase

문자열을 각각 대문자, 소문자로 변환하여 반환합니다.

let original = "Hello, World!";
let sub1 = original.toUpperCase(); // Hello 반환
let sub2 = original.toLowerCase(); // 
console.log(sub1); // HELLO, WORLD! 출력
console.log(sub2); // hello, world! 출력
console.log(original); // 원본 문자열 변화 X

10. trim(), trimStart(), trimEnd()

각각 문자열의 양쪽 공백, 왼쪽(시작점) 공백과 오른쪽(끝 지점) 공백을 제거할 때 사용됩니다.

let original = "    Hello, World!    ";
console.log(original.trim()); // 양쪽 공백을 제거한 Hello, World! 출력
console.log(original.trimStart()); // 왼쪽 공백을 제거한 Hello, World! 출력
console.log(original.trimEnd()); // 오른쪽 공백을 제거한 Hello, World! 출력

11. repeat()

해당 문자열을 주어진 매개변수 만큼 반복하여 반환합니다. 실수일 경우 자리버림을 한 정수값을 반복값으로, 음의 정수일 경우 범위 오류를 반환하고, 매개변수가 없거나 0일 경우 빈 문자열('')을 반환합니다.

let original = "Hello World! ";
console.log(original.repeat()); // 빈 문자열 반환
console.log(original.repeat(3)); // Hello World! Hello World! Hello World! 반환
console.log(original.repeat(-3)); // RangeError: Invalid count value: -3 반환
console.log(original.repeat(2.5)); // 실수 부분을 버리고 정수 부분 2만큼 반복한 Hello World! Hello World! 를 반환

12. replace()

문자열에서 특정 패턴을 찾아 다른 문자열로 대체하는 데 사용됩니다. 이 메서드는 첫 번째로 전달된 매개변수(문자열 또는 정규표현식)를 찾아서 두 번째 인자로 전달된 매개변수로 대체되는데, 문자열 내에 첫번째 매개변수가 여러 값이 존재할 경우 첫번째로 검색된 문자에 대해 적용 됩니다.

let original = "Hello, Hello World!";
console.log(original.replace("Hello", "Hi")); // 문자열 내 첫번째 Hello 단어를 Hi로 대체하여 반환된 문자열 Hi, Hello World! 출력

13. split()

문자열을 특정 구분자를 기준으로 나누어 배열로 반환합니다. 이 메서드는 문자열을 나눌 때 사용되며, 매개변수로 전달된 구분자를 기준으로 문자열을 나누어 배열에 저장합니다.

단 이스케이프 시퀸스를 이용해 해당 문자를 기준으로 처리할 때에는 \(달러 기호 두 개)를 작성한 뒤 해당 기호를 뒤에서 작성해주면 됩니다.

let original = "Hello, This is a World, and I'm Re_Go!";
console.log(original.split(' ')); // 공백을 기준으로 요소가 분해 된 [ 'Hello,', 'This', 'is', 'a', 'World,', 'and', "I'm", 'Re_Go!']를 반환
console.log(original.split(',')); // 콤마를 기준으로 요소가 분해 된 배열 [ 'Hello', ' This is a World', " and I'm Re_Go!" ]를 반환

14. join()

배열의 요소들을 특정 구분자를 기준으로 조합한 뒤 문자열로 반환합니다. 구분자를 생략하면 콤마(,)가 기본적으로 적용됩니다.

const array = ["apple", "banana", "cherry"];
const result = array.join();
console.log(result); // apple,banana,cherry 출력