템플릿 리터럴 (Template literals)

템플릿 리터럴은 ?

• 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다.
• 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
• 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능이 있다.

1. 문자열 인터폴레이션(String Interpolation)

const first = 'kyusung';
const last = 'cho';

// ES5: 문자열 연결
console.log('His name is ' + first + ' ' + last + '.');
// "My name is kyusung cho."

// ES6: String Interpolation
console.log(`His name is ${first} ${last}.`);
// "My name is kyusung cho."

2. 표현식 삽입법(Expression interpolation)

가독성이 좋아졌다.

// ES5
var a = 10;
var b = 11;
var c = "리액트";
var str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str);   //저는 21살이고 리액트를 좋아합니다.

// ES6
let a = 10;
let b = 11;
let c = "리액트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 21살이고 리액트를 좋아합니다.

함수를 호출하여 그 결과를 문자열에 주입할 수도 있다.

function getCity() {
  return 'Seoul'
}

const name = 'kyusung';
const age = 24;

const str = `name: ${name + ' cho'}, age: ${age + 10}, city: ${getCity()}`;
console.log(str);


//output
name: kyusung cho, age: 34, city: Seoul

표현식으로 삼항연산자 사용도 가능

const name = 'kyusung';
const age = 24;

const str = `name: ${name + ' cho'}, age: ${age >= 24 ? 'Over 24' : 'Under 24'}`;

//output
name: kyusung cho, age: Over 24

출처