[ES6] 템플릿 문자열

기존 문법

기존 js에서는 문자열 + 문자열, 또는 문자열 + 변수를 연결하려면 병합 연산자를 사용해야 했다.

예시1 = 문자열 + 문자열

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = 'string +' + string2;

예시2 = 문자열 + 변수

var product = { name: '도서', price: '4200원' };
var message = '제품' + product.name + '의 가격은' + product.price + '입니다';

예시3 = 줄바꿈 시 이스케이프 시퀀스 포함 (\n)

var multiLine = '문자열1\n문자열2';
var value1 = 1;
var value2 = 2;

예시 4, 5 = 괄호 활용으로 연산구문 먼저 실행

var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.';
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다.';

ES6

템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용한다.

예시1 = 전개 연산자

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
const combined = [...array1, ...array2];
//결과: combined = ['one', 'two', three', 'four']

예시2 = 요소 및 배열 추출

const [first, second, three='empty', ...others] = array1; // '...others'는 앞에서 추출하고 남은 요소를 추출한 것이다.
// 결과: first = 'one', second= 'two', three= 'empty', others = []

예시3 = 올바르지 못한 예시

var wrongArr = ...array1; // 전개연산자를 배열 표현식 없이 사용한 잘못도니 예제이다.

예시4 = 변수에 할당

function func(...args) {var [first, ...others] = args; }