자바스크자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal)

 

⭕ 자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal)

➡️ 템플릿 리터럴(Template Literal)

ES6에서 등장한 내장된 문자열 표현식입니다.

---

 

템플릿 리터럴은 큰따옴표나 작은따옴표 대신 백틱(`)을 사용하여 문자열을 정의합니다. 이 방법을 통해 문자열 내에서 변수나 표현식을 ${}로 감싸 직접 삽입할 수 있습니다. 이는 코드의 가독성을 높이고, 문자열을 더욱 쉽게 조작할 수 있게 해 줍니다.

---

템플릿 리터럴을 사용하면 변수나 심지어는 함수의 결괏값을 문자열 안에 직접 삽입할 수 있어, 동적인 문자열 생성이 매우 간편해집니다. 이러한 특성은 HTML 요소를 동적으로 생성하는 등 웹 개발에서 자주 활용됩니다.

---

let name = "Jane";
let age = 28;

// 전통적인 문자열 결합 방식
let greeting = "Hello, my name is " + name + " and I am " + age + " years old.";

// 템플릿 리터럴을 사용한 문자열 결합
let templateGreeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is Jane and I am 28 years old.
console.log(templateGreeting); // Hello, my name is Jane and I am 28 years old.