소개
JavaScript에서 _템플릿 문자열_을 사용하면 문자열 안에 표현식을 넣을 수 있어요. 이를 문자열 보간이라고도 하죠.
이 기능은 내장 String 전역 객체의 기능을 확장한 거예요.
JavaScript에서는 텍스트를 백틱으로 감싸서 템플릿 문자열을 만들 수 있어요.
템플릿 문자열을 쓰면 텍스트에 줄 바꿈이나 다른 특수 문자를 넣을 수 있을 뿐만 아니라, 변수와 다른 표현식도 넣을 수 있어요.
const num1 = 1;
const num2 = 2;
`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.
위 예시에서는 백틱(``)을 사용해 템플릿 문자열을 나타내요. ${...}는 값을 대신 채워 넣는 자리 표시자예요.
문자열이 아닌 타입은 암묵적으로 문자열로 변환돼요.
이 내용은 타입 변환 개념에서 다뤄요.
템플릿 문자열에는 모든 종류의 표현식을 사용할 수 있어요.
const track = 'JavaScript';
`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.
문자열을 여러 줄로 나눠서 써야 할 때도 있어요:
`This is an example of using template
strings to accomplish multiple
lines`;
이렇게 값을 대신 채워 넣는 기능을 이용하면, 출력 문자열이 무엇이 되어야 할지 결정하는 로직을 넣을 수도 있어요.
그 예로 삼항 연산자를 넣는 방법이 있어요.
이 연산자는 if/else문을 짧게 쓴 형태예요.
문법은 condition ? consequent-expression : alternative-expression이에요.
조건이 truthy면 콜론 왼쪽의 피연산자가 반환돼요.
그렇지 않으면 삼항 표현식의 결과는 콜론 오른쪽의 피연산자가 돼요.
const grade = 95;
`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.
지침
이 연습 문제에서는 표지판 회사가 표지판에 넣을 맞춤 메시지를 만들 수 있도록 코드를 작성해요.
1. 기념일 표지판 만들기
buildSign(occasion, name) 함수를 구현해요. 이 함수는 occasion 매개변수로 문자열을 받고, name 매개변수로 누군가의 이름이 담긴 문자열을 받아요.
두 매개변수는 템플릿 문자열에 삽입되어 표지판에 표시할 메시지를 만들어요.
buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"
2. 생일 표지판 만들기
buildBirthdaySign(age) 함수를 구현해요. 이 함수는 나이를 받아서 나이에 따라 표지판에 표시할 메시지의 일부를 결정해요.
나이가 50 이상이면 표지판에서는 사용자를 _mature_라고 부르고, 그렇지 않으면 _young_이라고 불러요.
정확히 기대되는 출력은 아래와 같아요:
buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."
buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."
3. 졸업 표지판 만들기
graduationFor(name, year) 함수를 구현해요. 이 함수는 이름을 문자열 매개변수로, 연도를 숫자 매개변수로 받고, 문자열 보간을 사용해 표지판에 넣을 문구를 만들어요. 이때 메시지의 두 줄을 줄바꿈으로 구분해요.
graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
Class of 2022"
*/
4. 표지판 비용 계산하기
costOf(sign, currency) 함수를 구현해요. 이 함수는 표지판에 들어갈 내용이 담긴 문자열과 통화를 나타내는 문자열을 받아요.
표지판의 기본 가격은 주어진 통화로 20이에요. 그리고 글자마다 2씩 추가돼요. (공백도 계산에 포함돼요.)
반환되는 문구에는 표지판을 만드는 비용이 포함되는데, 소수점 이하 두 자리로 표시하고 그 뒤에 통화 문자열을 붙여요.
costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
학습 연습 문제
