CODINGNOW
← JavaScript 강의 목록으로
🔤
객체 · 배열
중급 · 선수: 07_배열_기초

08. 문자열

백틱(`` ` ``)으로 감싸면 줄바꿈과 `${expr}` 보간을 지원합니다.

문자열템플릿 리터럴slicereplace
소요 시간
⏱ 약 1시간
난이도
📊 초급
선수 조건
🎯 단원 7
결과물
백틱(`` ` ``)으로 감싸면 줄바꿈과 `${expr}` 보간을 지원합니다.

이 강의에서 배우는 것

  • 1템플릿 리터럴로 문자열을 조립할 수 있다.
  • 2`split`, `join`, `replace`, `includes`, `trim` 등 자주 쓰는 메서드를 안다.
  • 3문자열은 불변(immutable)임을 이해한다.
  • 4정규식의 기본 문법(리터럴, 플래그)을 알고 검색/치환에 쓸 수 있다.
  • 5인덱스와 `length` 로 문자에 접근한다.

소개

백틱(`` ` ``)으로 감싸면 줄바꿈과 `${expr}` 보간을 지원합니다.

핵심 개념

1. 템플릿 리터럴

백틱(`` ` ``)으로 감싸면 줄바꿈과 `${expr}` 보간을 지원합니다.

javascript
const name = "수아";
const greet = `안녕, ${name}!
오늘도 화이팅`;

문자열 결합에 `+` 보다 가독성이 훨씬 좋습니다.

2. 자주 쓰는 메서드

모든 문자열 메서드는 **원본을 바꾸지 않고 새 문자열을 반환** 합니다.

javascript
"  hi  ".trim();              // "hi"
"hello".toUpperCase();        // "HELLO"
"a,b,c".split(",");           // ["a","b","c"]
["a","b"].join("-");          // "a-b"
"banana".replace("a", "A");   // "bAnana" (첫 번째만)
"banana".replaceAll("a","A"); // "bAnAnA"
"hello".includes("ll");       // true
"hello".startsWith("he");     // true

3. 인덱싱과 길이

`str[i]` 또는 `str.charAt(i)` 로 한 글자에 접근합니다. 단, 이모지처럼 코드 포인트가 2 단위로 구성된 문자는 `[...str]` 분해가 안전합니다.

javascript
"hello".length; // 5
"abc"[1];       // "b"

4. 정규식 기초

정규식 리터럴은 `/.../플래그` 형식이며 `i`(대소무시), `g`(전역), `m`(다중행) 등을 씁니다.

javascript
const re = /\d+/g;
"a1b22c333".match(re); // ["1", "22", "333"]
"price 1500".replace(/\d+/, "###"); // "price ###"

핵심 예제

파일다루는 내용
`01_template_literal.js`템플릿 리터럴과 멀티라인
`02_methods.js`trim/upper/replace/includes
`03_split_join.js`배열 ↔ 문자열 변환
`04_regex_intro.js`정규식 매칭/치환 기초

src/01_template_literal.js

javascript
/**
 * 템플릿 리터럴
 */
"use strict";

const name = "지호";
const score = 92;

const msg = `이름: ${name}
점수: ${score}
등급: ${score >= 90 ? "A" : "B"}`;

console.log(msg);

src/02_methods.js

javascript
/**
 * 자주 쓰는 문자열 메서드
 */
"use strict";

const raw = "   Hello, World!   ";
console.log("trim =", `[${raw.trim()}]`);
console.log("upper =", raw.trim().toUpperCase());
console.log("replace =", "banana".replace("a", "A"));
console.log("replaceAll =", "banana".replaceAll("a", "A"));
console.log("includes =", "javascript".includes("script"));
console.log("startsWith =", "javascript".startsWith("java"));

src/03_split_join.js

javascript
/**
 * split 과 join
 */
"use strict";

const csv = "apple,banana,grape";
const parts = csv.split(",");
console.log("split =", parts);

const joined = parts.join(" / ");
console.log("join =", joined);

const sentence = "I love javascript";
const words = sentence.split(" ");
const reversed = words.reverse().join(" ");
console.log("reversed =", reversed);

src/04_regex_intro.js

javascript
/**
 * 정규식 기초
 */
"use strict";

const text = "주문번호 A1234, 수량 56, 가격 7800";

const digits = text.match(/\d+/g);
console.log("digits =", digits);

const masked = text.replace(/\d/g, "*");
console.log("masked =", masked);

const isEmail = /^[\w.-]+@[\w-]+\.[a-z]+$/i;
console.log("email? =", isEmail.test("user@example.com"));

자주 하는 실수

  1. 메서드가 원본을 바꾼다고 오해한다. (불변)
  2. `replace` 가 첫 번째만 바꾸는 것을 모르고 사용한다.
  3. `parseInt("08")` 의 과거 8진수 이슈 — 항상 `parseInt(s, 10)` 으로 진수를 명시.
  4. `===` 가 아닌 `==` 로 비교하다 형변환 함정에 빠진다.
  5. 이모지 길이를 `length` 로 잘못 측정한다.

FAQ

Q1. `"` 와 `'` 차이는?

동일합니다. 프로젝트 컨벤션을 따르세요.

Q2. 문자열에서 한 글자를 바꾸려면?

새 문자열을 만들어야 합니다. 예: `s.slice(0, i) + ch + s.slice(i+1)`.

Q3. 정규식 vs includes?

단순 포함은 `includes`, 패턴 매칭은 정규식이 적합합니다.

과제

  • `homework_01.js` — 문자열을 받아 단어 수를 세는 함수.
  • `homework_02.js` — 주민번호에서 뒷자리를 마스킹(`*`)하세요.

homework/README.md

## homework_01.js 문자열을 받아 공백 기준 단어 수를 반환하는 `wordCount(s)` 를 작성하세요.

  • 연속 공백이나 양끝 공백은 무시.

## homework_02.js 주민번호 형식 `"YYMMDD-XXXXXXX"` 에서 뒷자리 7자리를 `*` 로 가리는 `mask(rrn)` 을 작성하세요.

homework/answer/homework_01.js

javascript
/**
 * 과제 1: 단어 수 세기
 */
"use strict";

/**
 * @param {string} s
 * @returns {number}
 */
function wordCount(s) {
  const trimmed = s.trim();
  if (trimmed === "") return 0;
  return trimmed.split(/\s+/).length;
}

console.log(wordCount("  hello world  js  ")); // 3
console.log(wordCount(""));                     // 0

homework/answer/homework_02.js

javascript
/**
 * 과제 2: 주민번호 마스킹
 */
"use strict";

/**
 * @param {string} rrn
 * @returns {string}
 */
function mask(rrn) {
  return rrn.replace(/-\d{7}$/, "-*******");
}

console.log(mask("000101-1234567")); // 000101-*******

다음 단원

[09_구조분해와_스프레드](../09_구조분해와_스프레드/) — 객체/배열을 펼치고 묶기.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗