문자열 — 템플릿·split·replace

문자열은 어디에나 있습니다 — 사용자 입력·API 응답·로그·UI 라벨. 11편은 매일 쓰는 메서드 10개와 백틱(`) 템플릿 리터럴, 그리고 정규식의 첫 한 입을 정리합니다.

템플릿 리터럴 — 백틱이 거의 정답

const name = "준성", age = 39;

// 옛 방식
"안녕, " + name + "! 나이: " + age;

// 백틱 — 변수 보간
`안녕, ${name}! 나이: ${age}`;

// 표현식 OK
`내년에 ${age + 1}살`;

// 여러 줄
`첫 줄
두 번째 줄
${name} 의 인사`;

// 함수도 호출 가능
`총 ${arr.length}개`;

자주 쓰는 메서드 10개

실전 패턴 — 자주 만나는 5가지

① 이메일에서 도메인만

const email = "[email protected]";
email.split("@")[1];                  // "gmail.com"
email.slice(email.indexOf("@") + 1);  // 같은 결과

② 카드 번호 마스킹

const card = "1234567812345678";
"*".repeat(12) + card.slice(-4);      // "************5678"

③ 단어 첫 글자 대문자

function capitalize(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}
capitalize("hello");                  // "Hello"

④ 슬러그 만들기 (한국어 무시)

const title = "  React 와 Vue ";
title.trim().toLowerCase().replace(/\s+/g, "-");
// "react-와-vue"

⑤ CSV 한 줄 → 객체

const headers = ["id", "name", "email"];
const row = "1,준성,[email protected]";
const obj = Object.fromEntries(
  headers.map((h, i) => [h, row.split(",")[i]])
);
// { id: "1", name: "준성", email: "[email protected]" }

정규식 — 한 입만

// 문자 그대로의 검색은 includes 면 충분
// 정규식은 "패턴" 이 필요할 때

const text = "전화: 010-1234-5678, 010-9999-1111";

// 모든 전화번호 추출
text.match(/\d{3}-\d{4}-\d{4}/g);     // ["010-1234-5678", "010-9999-1111"]

// 이메일 형식 대충 검증
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRe.test("[email protected]");              // true

// 치환에서 정규식 사용
"aaa-bbb-ccc".replace(/-/g, "_");     // "aaa_bbb_ccc"  ← g 플래그로 전부
"aaa bbb  ccc".replace(/\s+/g, " ");  // 연속 공백 1칸으로

// 그룹 캡처
const m = "2026-05-17".match(/^(\d{4})-(\d{2})-(\d{2})$/);
// m[1]="2026", m[2]="05", m[3]="17"

길이의 함정 — 이모지·한글 조합

"안녕".length              // 2 ← OK
"👋".length                // 2 ← !! (surrogate pair)
"가족👨‍👩‍👧".length          // 7 ← !! (ZWJ 합성)

// 실제 시각적 글자 수 (그래핍)
[..."👋"].length           // 1 ← spread 가 코드포인트 단위
Array.from("👋").length    // 1

// 완벽한 그래핍 카운트는 Intl.Segmenter (ES2022+)
const seg = new Intl.Segmenter("ko", { granularity: "grapheme" });
[...seg.segment("가족👨‍👩‍👧")].length   // 3