JavaScript 문자열 보간(string interpolation)은 문자열의 일부에 표현식을 삽입하는 기법입니다. 템플릿 리터럴(template literal)을 사용하면 변수나 수식 계산 결과 같은 값을 손쉽게 문자열 안에 넣을 수 있습니다.
JavaScript 문자열 안에 특정 값을 추가해야 하나요? 템플릿 리터럴 문법이 그 해답입니다. 템플릿 리터럴은 여러 줄에 걸친 문자열을 다루기 쉽게 만들어 주고, 문자열 내부에 값을 삽입할 수 있게 해줍니다. 즉, 템플릿 리터럴이 바로 JavaScript 문자열 보간 문법입니다.
이 글에서는 JavaScript 문자열 보간이 무엇인지, 어떻게 동작하는지 살펴보고, 실제 예제를 통해 직접 따라 할 수 있도록 안내합니다.
JavaScript 문자열 보간의 기본
템플릿 리터럴을 사용하면 JavaScript 문자열에 값을 추가할 수 있습니다. 템플릿 리터럴은 달러 기호($) 뒤에 중괄호({}) 한 쌍이 이어지는 형태이며, 중괄호 안에는 문자열에 삽입하고 싶은 표현식을 작성합니다.
템플릿 리터럴을 사용하면 문자열 연결(concatenation)에 의존하지 않고도 문자열에 값을 삽입할 수 있습니다. 템플릿 리터럴을 선언하려면 문자열을 큰따옴표나 작은따옴표가 아닌 백틱(`)으로 감싸야 합니다.
다음 문법을 살펴보세요:
`This is a string. Here is the value of 9 + 10: ${9 + 10}.`
위 코드는 템플릿 리터럴을 선언한 예시입니다. 여기서 사용된 표현식은 다음과 같습니다:
${9 + 10}
이 표현식은 9 + 10을 계산하며, 그 결과(19)가 마침표 앞, 즉 문자열 끝부분에 추가됩니다. 표현식을 마침표 앞에 작성했기 때문입니다.
JavaScript 문자열 보간 예제
템플릿 리터럴을 사용하면 값을 문자열에 직접 삽입할 수 있습니다. 다음 코드를 살펴보세요:
const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address)
첫 번째 줄에서는 영국 총리의 집 주소를 정의합니다. 그다음 템플릿 리터럴을 사용해 전체 주소 문자열을 만듭니다. ${} 문법을 통해 문자열에 값을 삽입했으며, 여기서는 "address_number" 변수의 값을 문자열에 넣었습니다.
코드를 실행하면 다음과 같은 결과가 출력됩니다:
The Prime Minister's address is 10 Downing Street.
두 문자열이 성공적으로 하나로 합쳐졌습니다.
템플릿 리터럴 안에는 어떤 값이든 삽입할 수 있습니다. 문자열, 숫자, JavaScript 수식 계산 결과 등 모두 가능합니다. 또한 템플릿 리터럴 안에 또 다른 템플릿 리터럴을 넣을 필요는 없습니다.
문자열 보간의 가장 큰 장점 중 하나는 문법이 명확하다는 점입니다. JavaScript 코드를 문자열 안에 직접 작성할 수 있기 때문입니다.
문자열 연결자(Concatenation)로 문자열 합치기
문자열은 연결자를 통해서도 합칠 수 있습니다. 두 개의 문자열이 있다고 가정해 보겠습니다:
const full_address = `The Prime Minister's address is `; const address_number = `10 Downing Street`;
두 문자열은 더하기 기호(+)로 연결할 수 있습니다:
const prime_minister_address = full_address + address_number + "."; console.log(prime_minister_address);
콘솔에는 다음 값이 출력됩니다:
The Prime Minister's address is 10 Downing Street.
두 문자열을 성공적으로 하나로 합쳤고, 마지막에는 연결 연산자를 사용해 문장 끝에 마침표(".")를 붙였습니다.
하지만 이 방식에는 단점이 있습니다. 값을 문자열의 끝에만 추가할 수 있다는 점입니다. 문자열 중간에 값을 넣으려면 코드가 복잡해지는데, 이것이 템플릿 리터럴 문법이 도입된 큰 이유 중 하나입니다. 이제는 문자열 어디든 손쉽게 값을 삽입할 수 있습니다.
문자열 보간으로 계산하기
템플릿 리터럴 안의 코드는 하나의 JavaScript 문(statement)입니다. 따라서 템플릿 리터럴을 사용해 계산을 수행하고 그 결과값을 프로그램에 삽입할 수 있습니다.
카페에서 두 잔의 음료 가격을 계산해 결과를 문자열에 담는 예제를 만들어 보겠습니다:
var drink1 = 2.30;
var drink2 = 2.20;
var bill = `The total cost of your drinks is $${drink1 + drink2}.`;
${} 문법 안에 계산식을 넣었습니다. 이 계산식은 두 개의 JavaScript 변수 값을 더합니다. 각각 drink1(2.30)과 drink2(2.20)입니다. 코드 실행 결과는 다음과 같습니다:
The total cost of your drinks is $4.50.
문자열 보간과 삼항 연산자(Ternary Operator)
JavaScript 삼항 연산자는 조건이 참(True)인지 거짓(False)인지 판별합니다. if 문을 더 간결하게 작성하는 방법이며, 특히 if 문의 결과가 한 줄짜리 코드일 때 유용합니다.
예를 들어, 고객이 커피에 4달러 이상 지출했다면 청구서와 함께 커피 멤버십 클럽 가입을 권유하고, 그렇지 않다면 청구서만 보여주는 로직을 생각해 볼 수 있습니다. 삼항 연산자를 사용해 고객의 청구 금액을 확인할 수 있습니다:
var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;
var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);
이 템플릿 리터럴에는 두 개의 삽입된 표현식이 포함되어 있습니다. 먼저 "total" 변수의 값을 문자열에 삽입합니다. 그다음 삼항 연산자를 사용해 고객에게 커피숍 멤버십 클럽 가입을 권유할지 여부를 확인합니다.
총 구매 금액이 4달러를 초과하면 콘솔에 다음 메시지가 출력됩니다:
The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.
조건이 거짓이라면 삼항 연산자는 콜론(":") 뒤의 값을 반환합니다. 이것이 표현식이 False로 평가될 때 반환되는 값입니다.
이 예제에서 콜론 뒤의 값은 빈 문자열입니다. 따라서 고객의 구매 금액이 4달러 미만이라면 템플릿 리터럴의 첫 번째 문장만 출력됩니다:
The total cost of your drinks is $4.50.
마무리
템플릿 리터럴을 사용하면 문자열 안에 값을 삽입할 수 있으며, 그 안에서 계산도 수행할 수 있습니다. 템플릿 리터럴은 백틱(`)으로 선언하며, 평가할 표현식은 달러 기호($)와 중괄호({})로 감싸 표기합니다.
JavaScript 학습을 더 깊이 있게 진행하고 싶다면 관련 학습 가이드도 함께 참고해 보세요.