표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 이번 포스팅을 통해 String 객체에 대해 제대로 정리하고 넘어가보자.

1. 문자열 생성

문자열 리터럴

• 문자열은 큰 따옴표("), 작은 따옴표('), 백틱을 사용해 생성할 수 있다.

let str1 = "Hello";
let str2 = 'World';
let str3 = `Hello ${str2}`; // 템플릿 리터럴

String 생성자 함수

• 표준 빌트인 객체인 String 객체는 생성자 함수다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다.
• String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringDate]] 내부 슬롯에 문자열을 할당한 String 래퍼 객체를 생성한다.

const strObj = new String();
console.log(strObj); // String { length: 0, [[Prototype]]: String, [[PrimitiveValue]]: "" }

• 여기서 [[PrimitiveValue]] 는 [[StringDate]] 내부 슬롯을 가리킨다.
• String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 [[StringDate]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다.
• String 생성자 함수의 인수로 문자열이 아닌 값을 할당하면 인수를 문자열로 강제 타입 변환 후 String 래퍼 객체를 생성한다.

const strObj = new String('Sean')
console.log(strObj); // String { 0: "S", 1: "e", 2: "a", 3: "n", , length: 4, [[PrimitiveValue]]: "Sean" }

• String 래퍼 객체는 배열과 마찬가지로 length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자를 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체이면서 이터러블(순회 가능한)이다.
• 배열과 유사하게 인덱스를 사용하여 각 문자에 접근할 수 있다.
• 단, 문자열은 원시 값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.

const strObj = new String('Sean')
console.log(strObj[0]); // 'S'

strObj[0] = 'L';
console.log(strObj); // 'Sean'

• new 연산자를 사용하지 않고 String 생성자 함수를 호출하면 String 인스턴스가 아닌 문자열을 반환한다.
• 이를 사용하여 명시적으로 타입을 변환하기도 한다.

String(1); // "1"
String(NaN); // "NaN"
String(true); // "true"

---

2. length 프로퍼티

• length 프로퍼티는 문자열의 문자 개수를 반환한다.

let str = "Sean";
console.log(str.length); // 4

---

3. String 메서드

• String 객체에는 원본 String 래퍼 객체를 직접 변경하는 메서드는 존재하지 않는다.
• 문자열은 변경 불가능한 값이기 때문에 String 래퍼 객체도 읽기 전용 객체로 제공된다.

const strObj = new String('Sean')
console.log(Object.getOwnPropertyDescriptors(strObj));
/* String 래퍼 객체는 읽기 전용 객체이므로 writable 프로퍼티 어트리뷰트 값이 false다. */
{
  '0': {value: 'S', writable: false, enumerable: true, configurable: false}
  '1': {value: 'e', writable: false, enumerable: true, configurable: false}
  '2': {value: 'a', writable: false, enumerable: true, configurable: false}
  '3': {value: 'n', writable: false, enumerable: true, configurable: false}
  length: {value: 4, writable: false, enumerable: false, configurable: false}
  [[Prototype]]: Object
}

indexOf

• 대상 문자열에서 인수로 전달받은 문자열을 검색하여 첫 번째 인덱스를 반환한다.
• 검색에 실패하면 -1을 반환한다.
• 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

let str = "Hello World";
console.log(str.indexOf("World")); // 6

str.indexOf('l', 3); // 3

lastIndexOf

• 문자열을 뒤에서부터 검색하여 첫 번째로 등장하는 인덱스를 반환한다.
• 검색에 실패하면 -1을 반환한다.
• 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

let str = "Hello World World";
console.log(str.lastIndexOf("World")); // 12

search

• 대상 문자열에서 인수로 전달받은 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환한다.
• 검색에 실패하면 -1을 반환한다.

const str = 'Hello world';

str.search(/o/); // 4
str.search(/x/); // -1

includes

• 대상 문자열에 인수로 전달받은 문자열이 포함되어 있는지 확인하고 그 결과를 boolean 값으로 반환한다.
• 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

let str = "Hello World";
console.log(str.includes("Hello")); // true

startsWith

• 대상 문자열이 인수로 전달받은 문자열로 시작하는지 확인하여 그 결과를 boolean 값으로 반환한다.
• 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

let str = "Hello World";
console.log(str.startsWith("Hello")); // true

endsWith

• 대상 문자열이 인수로 전달받은 문자열로 끝나는지 확인하여 그 결과를 boolean 값으로 반환한다.
• 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

let str = "Hello World";
console.log(str.endsWith("World")); // true

charAt

• 대상 문자열에서 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환한다.

let str = "Hello";
console.log(str.charAt(1)); // "e"

subString

• 첫 번째 인수로 전달받은 인덱스에 위치하는 문자부터 두 번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전 문자까지의 부분 문자열을 반환한다.
• slice와 유사하지만 음수 인덱스를 지원하지 않는다.

let str = "Hello World";
console.log(str.substring(0, 5)); // "Hello"

※ subStr(start, length)는 자바스크립트 표준에서 더 이상 권장되지 않는 비표준 메서드 이므로, 호환성 문제를 피하기 위해 subString이나 slice를 사용하는 것이 좋다.

slice

• 첫 번째 인수로 전달받은 인덱스에 위치하는 문자부터 두 번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전 문자까지의 부분 문자열을 반환한다.
• subString 메서드와 달리 음수인 인수를 전달할 수 있다.
• 음수인 인수를 전달하면 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다.

let str = "Hello World";
console.log(str.substring(-5)); // "Hello World"
console.log(str.slice(-5)); // "World"

toUpperCase

• 대상 문자열을 모두 대문자로 변경한 문자열을 반환한다.

let str = "Hello World";
console.log(str.toUpperCase()); // "HELLO WORLD"

toLowerCase

• 대상 문자열을 모두 소문자로 변경한 문자열을 반환한다.

let str = "Hello World";
console.log(str.toLowerCase()); // "hello world"

trim

• 대상 문자열 앞뒤에 공백 문자가 있을 경우 이를 제거한 문자열을 반환한다.

let str = "  Hello World  ";
console.log(str.trim()); // "Hello World"

repeat

• 대상 문자열을 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열을 반환한다.
• 인수로 전달받은 정수가 0이면 빈 문자열을 반환하고, 음수이면 RangeError를 발생시킨다.
• 인수를 생략하면 기본값 0이 설정된다.

let str = "Hello";
console.log(str.repeat(3)); // "HelloHelloHello"

replace

• 대상 문자열에서 첫 번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다.
• 검색된 문자열이 여럿 존재할 경우 첫 번째로 검색된 문자열만 치환한다.

let str = "Hello World";
console.log(str.replace("World", "JavaScript")); // "Hello JavaScript"

replaceAll

• 대상 문자열에서 첫 번째 문자열과 일치하는 모든 부분을 두 번째 인수로 전달받은 문자열로 치환하여 반환한다.

let str = "Hello World World";
console.log(str.replaceAll("World", "JavaScript")); // "Hello JavaScript JavaScript"

split

• 대상 문자열에서 첫 번째 인수로 전달한 문자열 또는 정규 표현식을 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다.
• 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다.

let str = "Hello World";
console.log(str.split(" ")); // ["Hello", "World"]

---

4. 이스케이프 문자(참고)

문자열에서 특정 문자를 표시하거나 줄 바꿈 등을 할 때 이스케이프 문자를 사용한다.

• \n: 줄 바꿈
• \t: 탭
• \': 작은 따옴표
• \": 큰 따옴표
• \\: 백슬래시