[ES6] Template literal

template literal ?

• 내장된 표현식을 허용하는 문자열 리터럴
• 여러 줄로 이루어진 문자열과 문자 보간 기능을 사용
• ES6에 새로운 문자열 표기법인 템플릿 리터럴 도입

let a = '안녕하세요'; // 일반적인 따옴표
let b = `안녕하세요`; // 백틱

console.log(a);
console.log(b);

→ 일반 문자열과 비슷해보이지만 ‘, “ 같은 통상적인 따옴표 대신 백틱(backtick) 기호 [`] 사용

alert(`동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세`);

→ 일반적인 문자열에서 줄바꿈은 허용되지 않지만, 템플릿 리터럴은 여러 줄에 걸쳐 문자열 작성 가능

→ 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용

String Interpolation

• 템플릿 리터럴은 + 연산자를 사용하지 않아도 새로운 문자열을 삽입할 수 있는 기능을 제공한다.
• 같은 결과로 출력되지만 템플릿 리터럴 표현식을 사용하여 더 간단하게 구현 가능하다.
• 표현식은 문자열로 강제 타입이 변환된다.

표현식 : ${변수명}

let a = 100;
let b = 50;

// ES5: 문자열 연결
console.log('결과는 ' + (a + b) + '입니다.'); // 결과는 150입니다.

// ES6: String Interpolation 
console.log(`결과는 ${a + b}입니다.`); // 결과는 150입니다.

중첩 템플릿

• 템플릿 리터럴을 중첩으로 사용도 가능하다.
• 하지만 tab 도 포함되서 출력된다.

let num = prompt('주민번호 뒷자리 첫글자 입력','1~4');

let gender = `
    성별 : ${(num == 1 || num == 3 ? '남자' :
    `여성(${(num == 2 ? '1900' : '2000')}년대생)`)}
`;

alert(gender);

코드 결과

2를 입력해서 확인을 눌렀을 때, 공백이 포함되서 결과가 출력되는 것을 확인할 수 있다.