템플릿문자열

템플릿문자열

es5문법 예시

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = string1 + ' ' + string2; // 1
var product = { name: '도서', price: '4200원' };
var message = '제품' + product.name + '의 가격은' + product.price + '입니다'; // 2
var multiLine = '문자열1\n문자열2'; //3
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = '곱셈값은 ' + value1 * value2 + '입니다. '; //4
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다. '; //5

1 -> 병합 연산자를 사용해 문자열과 문자열을 연결하고 있다
2 -> 문자열과 변수를 연결할 때도 병합 연산자를 사용한다.
3 -> 줄바꿈을 할때는 이스케이프 시퀀스 (\n)를 문자열에 포함시킨다.
4, 5 -> 연산 결과를 괄호로 묶어 연산 구문을 먼저 실행하기도 한다.

es6문법 예시

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;

var product = { name: '도서', price: '4200원' };
var message = `제품 ${product.name}의 가격은 ${product.price}입니다`;
var multiLine = `문자열1
문자열2`;
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다.`;
var operator2 = `불리언값은 ${boolValue ? '참' : '거짓'}입니다.`;

es6에서는 병합연산자 사용으로 복잡한 코드를 개선하기위해 템플릿 문자열을 도입했다. 템플릿 문자열은 작은 따옴표('') 대신 백틱(``) [탭key 위, 1key 왼쪽]으로 문자열을 표현한다.

3분 코딩 문제
다음 병합 연산자로 표현된 코드를 템플릿 문자열 전환해 표현해보기

var cart = {name:'도서', price:1500};
var getTotal = function(cart){
	return cart.price + '원';
}
var myCart = '장바구니에' + cart.name + '가 있습니다. 총 금액은' + getTotal(cart) + '입니다.'

정답

var cart = {name:'도서', price:1500};
var getTotal = function(cart){
    return `${cart.price}원`
}
var myCart = `장바구니에 ${cart.name} 가 있습니다. 총 금액은 ${getTotal(cart)} 입니다`;
console.log(myCart);