JavaScript | 템플릿 문자열

템플릿 문자열이란?

 

- 어퍼스트로피( ` ) 사용

 

// 템플릿 문자열(template strings)
// template : 일정한 틀, 형식

let year = 2018;
let month = 3;
let day = 11;

// 1
console.log('생년월일은 ' + year + '년 ' + month + '월  '+ day + '일 입니다.');

// 2
// 템플릿 문자열 사용하여 더하기 기호 생략하기
// 중괄호 안에는 변수나 연산식 등을 쓸 수 있음
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);

// 콘솔 출력(1=2)
생년월일은 2018년 3월 11일 입니다.
생년월일은 2018년 3월 11일 입니다.

 

 

// 템플릿 문자열 활용하여 훨씬 더 쉽고 편하게 작성할 수 있음
// '이 아닌 `(백틱) 사용
let myNumber = 3;

function getTwice(x){
    return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);

// 콘솔
3의 두 배는 6입니다.

 

 

실습 문제

 

재원이는 카페 매니저입니다. 며칠 뒤면 아르바이트 근무자들 급여 정산을 해야 하는데요.

근무자 별로 근무 시간을 계산해서 총 급여를 계산하는 calcWage 함수를 만들어보려고 합니다.

파라미터로 근무자 이름(name), 근무 시간(time), 그리고 시급(wage)을 전달받고 총 급여를 계산하기 위해 total 변수에 시간과 시급을 곱한 값을 담는 것까진 작성했는데, 마지막으로 콘솔에 출력하는 부분이 남았습니다.

템플릿 문자열 개념을 이용해서 아래의 문장이 출력되게 작성해주세요.

 

출력예시

김윤식님의 근무 시간은 총 208시간이며, 최종 급여는 2358720원 입니다.
성규재님의 근무 시간은 총 175시간이며, 최종 급여는 2128000원 입니다.
손태웅님의 근무 시간은 총 161시간이며, 최종 급여는 2104270원 입니다.
허우선님의 근무 시간은 총 222시간이며, 최종 급여는 2437560원 입니다.

 

정답

function calcWage(name, time, wage) {
  let total = time * wage;

// 1.' 와 같은 single quote 가 아니라 `(backtick)을 써주어야 함!
// 2.백틱으로 만든 문자열 안에서, $와 {}를 열고닫으면 중괄호 안에 변수나 연산식 등을
// 자유롭게 작성가능
//
  console.log(`${name}님의 근무 시간은 총 ${time}시간이며, 최종 급여는 ${total}원 입니다.`);
}

calcWage('김윤식', 208, 11340);
calcWage('성규재', 175, 12160);
calcWage('손태웅', 161, 13070);
calcWage('허우선', 222, 10980);