← 글 목록

notes

32장. String

모던 JS Deep Dive — String 객체·문자열 메서드와 처리 핵심 정리.

참고: 이웅모 《모던 자바스크립트 Deep Dive》 32장 · [MDN String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

문자열은 원시이자 불변. 메서드는 새 문자열을 돌려준다. length·인덱스·검색·변형·템플릿까지 일상 API를 한곳에.

const s = 'Hello';
console.log(s.length, s[1], s.at(-1));
console.log(s.toLowerCase(), s.includes('ell'));
console.log(s.slice(1, 3), s.split(''));
console.log('a'.repeat(3), '  x  '.trim());
console.log('a,b'.split(',').join('-'));

String 생성자

String(x) 변환. new String은 객체 — 피한다(21).

주요 메서드

검색: indexOf/includes/startsWith/endsWith 추출: slice/substring/at 변형: toLowerCase/trim/replace/replaceAll/normalize 패딩: padStart/padEnd

console.log('42'.padStart(5, '0'));
console.log('foo bar'.replaceAll(' ', '_'));

유니코드

UTF-16 코드 유닛. 이모지는 length/인덱스가 어긋날 수 있음 → for…of / Array.from / segmenter.

const emoji = '👍';
console.log(emoji.length, [...emoji].length);

예제

function slugify(s) {
  return s.trim().toLowerCase().replace(/\s+/g, '-');
}
function lines(s) {
  return s.split(/\r?\n/);
}

함정

  • charAt vs at
  • replace는 첫 매치(정규식 g 또는 replaceAll)
  • localeCompare로 정렬

표

실무

  • UI 문자열 템플릿
  • 검색은 includes
  • i18n은 locale 메서드

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.

연습·복습 체크리스트

  • [ ] 핵심 표 다시 그리기
  • [ ] 함정 예제 콘솔 재현
  • [ ] MDN 북마크
  • [ ] 실무 코드 검색·리팩터 후보
  • [ ] 앞뒤 장 한 줄 연결

일기 보강

책을 덮고 한 줄 정의를 내 말로 다시 썼다. 예제 세 개를 치면 문제 유형이 보인다. 원문 복붙 없이 “왜”만 남겼다.

웹·스펙 메모

MDN 용어를 디버깅 언어로 번역해 적는다. 팀 컨벤션 초안으로 표를 제안한다.

실무 적용

PR에 체크리스트, 버그 리포트에 재현+기대/실제.