JavaScript의 템플릿 리터럴이란 무엇입니까?

템플릿 리터럴이란 무엇입니까?

ES6 버전의 JavaScript에서는 템플릿 리터럴이 도입되었습니다. ES6 이전에는 문자열 내에서 사용하려는 변수가 있는 경우 다음 예제와 같은 작업을 수행해야 했습니다.

function printDrink() {
  var drink = "Tea";
  return "My favourite drink is" + " " + drink;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea

위의 예에서는 printDrink라는 함수 선언을 만듭니다. 함수 내에서 drink라는 변수를 만듭니다. 우리는 문자열 "Tea"를 변수에 할당합니다. 이 함수는 연결(더하기 기호)을 사용하여 문자열과 drink 변수를 출력하는 문자열을 반환합니다. 함수가 호출되면 문자열이 반환됩니다.

템플릿 리터럴은 연결을 수행하지 않고 문자열에 변수 또는 표현식을 보간(주입)하는 깔끔한 방법을 제공합니다. 템플릿 리터럴은 일반적인 큰따옴표나 작은따옴표 대신 백틱으로 묶습니다. 문자열 보간은 변수가 문자열에 삽입되는 시기를 설명합니다. 보간하려는 변수는 중괄호로 묶이고 달러 기호로 시작됩니다. 변수 자체는 중괄호 안에 배치됩니다.

이전 예제를 살펴보지만 이번에는 템플릿 리터럴을 사용합니다.

function printDrink() {
  var drink = "Tea";
  return `My favourite drink is ${drink}`;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea

위의 예에서 우리는 동일한 함수 선언과 음료 변수를 유지합니다. 이번에는 템플릿 리터럴을 사용합니다. 템플릿 리터럴은 백틱으로 둘러싸여 있으며 문자열을 반환합니다. 보간을 사용하여 drink 변수가 템플릿 리터럴에 주입됩니다. 함수가 호출되면 동일한 반환 값을 얻습니다.

다중 줄 문자열

템플릿 리터럴의 또 다른 유용한 기능은 문자열을 여러 줄에 걸쳐 놓을 수 있다는 것입니다. ES6 이전에는 이를 달성하기 위해 문자열 연결이나 개행 문자(\n)를 사용해야 했습니다. 아래에 이에 대한 예를 간략하게 보여줍니다.

var ourString = "First line\nSecond line\nThird line\n";
console.log(ourString);
//Returns ---> 
First line
Second line
Third line

템플릿 리터럴을 사용하면 더 이상 이에 대해 걱정할 필요가 없습니다. 여러 줄 문자열을 만들고 싶다면 문자열을 백틱으로 묶고 줄을 분리하면 됩니다.

let ourString = `First line
Second line 
Third line`;
console.log(ourString);
//Returns ---> 
First line
Second line
Third line

이 기사를 즐겼기를 바랍니다. 비디오 자습서를 보려면 여기에서 사용할 수 있습니다.