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에 체크리스트, 버그 리포트에 재현+기대/실제.