[06장 데이터 타입] 템플릿 리터럴

🍰 template literal

: ES6에 도입된 새로운 문자열 표기법. 편리한 문자열 처리 기능 제공. 런타임에 일반 문자열로 변환되어 처리됨.

• 멀티라인 문자열(multi-line string)
• 표현식 삽입(expression interpolation)
• 태그드 템플릿(tagged template)

🍴 멀티라인 문자열

: 여러 줄에 걸친 문자열 쉽게 작성 가능. 기존 방식에서는 백슬래시(\) 사용함.

// 기존 방식
var str = "이것은 첫 번째 줄\n" +
          "이것은 두 번째 줄";

// 템플릿 리터럴
let str = `이것은 첫 번째 줄
이것은 두 번째 줄`;

🍴 표현식 삽입

: 변수나 표현식을 문자열 안에 간편하게 삽입

let name = 'Alice';
let age = 25;

// 기존 방식
let message = 'Hello, my name is ' + name + '. I am ' + age + ' years old.';

// 템플릿 리터럴
let message = `Hello, my name is ${name}. I am ${age} years old.`;

🍴 태그드 템플릿

: 템플릿 리터럴 앞에 함수를 붙여 '태그드 템플릿' 만들 수 있음. 템플릿 리터럴 더 강력하게 제어.

function tag(strings, ...values) {
  console.log(strings); // ['Hello ', ' world ', '']
  console.log(values);  // [10, 20]
  return 'Tagged Template Example';
}

let x = 10;
let y = 20;

console.log(tag`Hello ${x} world ${y}`); // Tagged Template Example