[modern JS Deep Dive] - 32장 . String

유선향·2025년 1월 18일
0

<modern_JS_Deep_Dive>

목록 보기
29/44

String 생성자 함수

  • 표준 빌트인 객체인 String 은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다.
  • 표준 빌트인 객체이므로 new 연산자와 함께 호출 하여 String 인스턴스를 생성할 수 있다.
  • 문자열이 아닌 인수를 전달할경우 강제로 문자열로 변환후, 해당 문자열을 할당한 래퍼 객체를 생성한다.
    • ⇒ 명시적 타입 변환 이용 가능
const str = new String()
// String {length:0 , [[PrimitiveValue]]:""}
//인수를 전달하지 않으면 [[StringData]]내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다.

const str = new String('test')
// String {0:'t',1:'e',2:'s',3:'t',length:4 , [[PrimitiveValue]]:"test"}
//인수를 전달하면[[StringData]]내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다.

length 프로퍼티

  • 위에서 봤듯이, String 래퍼 객체는 배열과 마찬가지로 length 프로퍼티를 갖기에, 문자열의 문자 갯수를 반환할수 있다.
  • 인덱스를 나타내는 숫자를 프로퍼티 키로, 각 문자를 프로퍼티 값으로 가지므로 String 래퍼 객체는 유사 배열 객체다.
const str ='test'
console.log(str.length) //4

String 메소드

String 메서드는 읽기 전용 객체임

  • 배열에는 원본 배열을 변경하는 메서드와 새로운 배열을 생성하여 반환하는 메서드가 있다.
  • 그러나 String 메서드에는 직접 변경하는 메서드는 존재 하지 않고, 항상 새로운 문자열을 반환하는 메서드만 존재한다.
  • 문자열은 변경 불가능한 원시값이기에, String 래퍼 객체도 읽기 전용 객체로 제공된다.

자주 사용하는 String 메소드

// ✅ String 자주 쓰는 메소드 정리

const str = "  Hello World!  ";

// 1. 길이 확인
console.log(str.length); // 15 (공백 포함)

// 2. 특정 문자 접근
console.log(str[0]);       // ' '
console.log(str.charAt(2)); // 'H'
console.log(str.charCodeAt(2)); // 72 (유니코드 값)

// 3. 문자열 검색
console.log(str.indexOf("World"));    // 8 (처음 등장 위치)
console.log(str.lastIndexOf("o"));    // 9 (마지막 등장 위치)
console.log(str.includes("Hello"));   // true (포함 여부)
console.log(str.startsWith("  He"));  // true (접두사 검사)
console.log(str.endsWith("!  "));     // true (접미사 검사)

// 4. 문자열 추출
console.log(str.slice(2, 7));    // 'Hello' (2~6까지)
console.log(str.substring(2, 7)); // 'Hello' (slice와 비슷하나 음수 불가)
console.log(str.substr(2, 5));    // 'Hello' (2번부터 5글자) → deprecated (옛날 방식)

// 5. 대소문자 변환
console.log(str.toUpperCase()); // '  HELLO WORLD!  '
console.log(str.toLowerCase()); // '  hello world!  '

// 6. 공백 제거
console.log(str.trim());      // 'Hello World!' (양 끝 공백 제거)
console.log(str.trimStart()); // 'Hello World!  '
console.log(str.trimEnd());   // '  Hello World!'

// 7. 문자열 교체
console.log(str.replace("World", "JS"));     // '  Hello JS!  ' (첫 매치만 교체)
console.log(str.replace(/o/g, "0"));         // '  Hell0 W0rld!  ' (정규식으로 전체 교체)
console.log(str.replaceAll("l", "-"));       // '  He--o Wor-d!  ' (ES2021+)

// 8. 분리 & 결합
console.log(str.split(" "));     // ['','','Hello','World!',''] (공백 기준 split)
console.log("apple,banana,kiwi".split(",")); // ['apple','banana','kiwi']
console.log(["apple", "banana"].join(" & ")); // 'apple & banana'

// 9. 반복 & 채우기
console.log("ha".repeat(3));     // 'hahaha'
console.log("5".padStart(3, "0")); // '005' (앞에 0 채우기)
console.log("5".padEnd(3, "0"));   // '500' (뒤에 0 채우기)

// 10. 기타
console.log(str.concat("!!!")); // '  Hello World!  !!!' (문자열 연결)
console.log("🎉".normalize("NFC")); // 유니코드 정규화 (문자 동일성 맞춤)

// 11. 템플릿 문자열 (백틱 `) → 변수/표현식 삽입 가능
const name = "Min";
console.log(`Hello, ${name}!`); // 'Hello, Min!'

0개의 댓글