[Javascript] Template Literals(템플릿 리터럴)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

 

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 

문자열 내에서 표현식을 포함한다. 따라서 여러줄의 문자열을 보다 간편하게 작성할 수 있게 해준다. 

템플릿 리터럴은 백틱(backtick, `)문자로 싸여 사용된다. 

(맥북에서 백틱을 출력하려면 키보드 표현을 영어로 전환하고 ₩를 누르면 출력할 수 있다. )

 

기본 문법

let text = `Hello, World!`;

 

특징

1. 다중 줄 문자열 (Multi-line Strings)

let multiLine = `This is
a string
that spans multiple lines.`;

console.log(multiLine);

 

 

템플릿 리터럴을 사용하면 여러 줄의 문자열을 쉽게 작성할 수 있다. 

 

2. 표현식 삽입 (Expression Interpolation)

 

${} 구문을 사용하여 문자열 내에 표현식을 삽입할 수 있다.

let name = 'Alice';
let greeting = `Hello, ${name}!`;

console.log(greeting); // Hello, Alice!

 

 

표현식 내에서는 JavaScript의 모든 유효한 표현식을 사용할 수 있다. 

아래는 숫자와 문자가 혼합된 경우이다. 

let a = 5;
let b = 10;
let sum = `The sum of a and b is ${a + b}.`;

console.log(sum); // The sum of a and b is 15.

 

 

 

3. 태그된 템플릿 리터럴 (Tagged Template Literals)

 

태그 함수(tag function)를 사용하여 템플릿 리터럴을 처리할 수 있다. 태그 함수는 템플릿 리터럴의 각 부분과 표현식을 인수로 받아 처리한다. (템플릿 리터럴에 태그 함수를 붙여서 문자열과 삽입된 표현식을 가공하는 기능임)

 

태그함수는 두 종류의 인수를 받는다. 

 

1. 문자열 리터럴 부분들을 배열로 받는다. 

2. 표현식 부분들을 순서대로 받는다. 

 

function tag(strings, ...expressions) {
    console.log(strings); // ['Hello, ', '! How are ', ' today?']
    console.log(expressions); // ['Alice', 'you']
    return `${strings[0]}${expressions[0]}${strings[1]}${expressions[1]}${strings[2]}`;
}

let name = 'Alice';
let tagResult = tag`Hello, ${name}! How are ${'you'} today?`;

console.log(tagResult); // Hello, Alice! How are you today?

 

 

4. 중첩된 템플릿 리터럴 (Nested Template Literals)

 

템플릿 리터럴은 중첩해서 사용할 수 있습니다.

 

let nested = `This is ${`a nested ${`template literal`}`}.`;

console.log(nested); // This is a nested template literal.

 

예제

1. 다중 줄 문자열

let multiLine = `This is a
multi-line string.`;

console.log(multiLine);
// 출력:
// This is a
// multi-line string.

 

2. 표현식 삽입

let name = 'Bob';
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is Bob and I am 30 years old.

 

3. 태그 함수 사용

function emphasize(strings, ...values) {
    return strings.reduce((result, str, i) => `${result}${str}<strong>${values[i] || ''}</strong>`, '');
}

let name = 'Charlie';
let message = emphasize`Hello, ${name}! Welcome to our site.`;

console.log(message); // Hello, <strong>Charlie</strong>! Welcome to our site.

 

 

템플릿 리터럴은 가독성을 높이고, 다중 줄 문자열과 동적인 문자열 생성을 더욱 쉽게 만들어주는 강력한 기능을 제공한다. JavaScript에서 문자열 작업을 할 때 매우 유용한 도구다.