JavaScript Academy · 강의

문자열 보간 기초

템플릿 리터럴 안에 표현식을 삽입합니다.

문자열 보간 기초은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

템플릿 리터럴이란

템플릿 리터럴은 따옴표 대신 백틱 문자를 사용하여 문자열을 만드는 방법입니다. 수동으로 문자열을 연결하지 않고도 문자열 안에 표현식을 직접 삽입할 수 있습니다.

자리 표시자는 달러 기호 뒤에 중괄호로 표현식을 감싸서 작성합니다. JavaScript가 표현식을 평가하고 그 값을 문자열에 삽입합니다.

const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)

보간 구문

템플릿 리터럴 안에서는 여는 달러-중괄호와 닫는 중괄호 사이에 표현식을 넣습니다. 표현식이 평가된 후 문자열로 변환됩니다.

아래 예제는 보간으로 얻는 것과 같은 결과를 일반 문자열 연결로 만듭니다. 따라서 리터럴 구문을 직접 보여 주지 않고도 개념을 이해할 수 있습니다.

const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)

보간이 유용한 이유

여러 변수와 리터럴 텍스트를 섞으면 더하기 연산자를 사용한 연결은 읽기 어려워집니다. 보간을 사용하면 주변 텍스트는 그대로 유지하고 동적인 부분만 삽입할 수 있습니다.

더하기 연산자 사용 감소
불필요한 공백 오류 방지
더 분명한 의도

const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")

모든 표현식 삽입하기

자리 표시자에는 변수뿐 아니라 유효한 모든 표현식을 넣을 수 있습니다. 산술 연산, 함수 호출, 속성 접근을 모두 사용할 수 있습니다.

const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))

내부에서 함수 호출하기

함수를 호출하고 반환된 값이 문자열에 들어가도록 할 수 있습니다. 예제에서는 이에 해당하는 문자열 연결 형식을 보여 줍니다.

function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))

속성 접근

객체 속성은 자리 표시자 안에서 직접 읽을 수 있습니다. 여기서는 사용자 객체에서 필드를 읽습니다.

const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)

숫자는 문자열이 됨

숫자가 문자열 맥락에 들어가면 자동으로 텍스트 형식으로 변환됩니다. 보간에서도 같은 형 변환이 일어납니다.

const total = 19.99
console.log("Total: $" + total)

자리 표시자 안의 삼항 연산자

삼항 연산자를 사용한 조건 논리는 자리 표시자 안에 넣을 수 있으므로, 한 줄에서 두 값 중 하나를 선택할 수 있습니다.

const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)

중첩 표현식

자리 표시자에는 메서드 연쇄와 중첩 호출을 넣을 수 있습니다. 표현식을 평가한 결과가 무엇이든 문자열에 삽입됩니다.

const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)

여러 값 섞기

한 문장에 여러 변수를 함께 넣어야 할 때 템플릿 리터럴의 장점이 잘 드러납니다. 읽기 쉬운 보간 버전은 설명으로 비교하고, 여기서는 연결을 사용한 동일한 결과를 보여 줍니다.

const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)

달러 기호 이스케이프하기

자리 표시자가 아니라 텍스트로 표시되는 달러-중괄호 시퀀스가 필요하다면, 템플릿 리터럴 안에서 백슬래시를 사용해 달러 기호를 이스케이프하십시오. 일반 문자열에서는 이스케이프할 필요가 없습니다.

const text = "Use $\{x\} for a placeholder"
console.log(text)

빠른 확인

보간에 대한 이해도를 확인해 보십시오.

요약

요약: 템플릿 리터럴은 백틱과 자리 표시자를 사용하여 문자열에 표현식을 삽입합니다.

자리 표시자는 어떤 표현식이든 평가합니다
값은 문자열로 변환됩니다
보간은 긴 문자열 연결보다 명확합니다
달러 기호를 이스케이프하면 기호 자체를 표시할 수 있습니다

const n = "World"
console.log("Hello, " + n + "!")

자주 묻는 질문

“문자열 보간 기초” 강의는 무료인가요?

네 — “문자열 보간 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“문자열 보간 기초”에서 뭘 배우나요?

템플릿 리터럴 안에 표현식을 삽입합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“문자열 보간 기초” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기