자바스크립트에서 백틱 사용, template literal, javascript usage of backticks

 

 

 

안녕하세요. 김숭늉입니다.

이번글에서는 자바스크립트 백틱사용에 대해 정리해 보겠습니다.

 

 

---

javascript 백틱 (`) 사용법 

 

맥의 경우 (옵션키 + ~)를 누르면 백틱을 사용할수 있으며, 

윈도우 PC에서는 (숫자 1번 좌측에 ~키와 같이 배치)되어있습니다. 

 

자바스크립트에서 함수와 함께 문자열이나 숫자를 쓰는경우 + 를 통해 각 스트링과 변수, 숫자를 이어줘야 합니다. 이렇게 하나하나 끊어서 (이어서) 사용하는 경우 프론트에 노출되었을때 어떻게 문자가 노출되는지 예상하기 어려운 단점이 있습니다. 

const firstName = "seungyeon";

const job = "teacher";

const birthYear = 1989;

const year = 2037;

const seungyeon =

"I'm " + firstName + ", a " + (year - birthYear) + " years old " + job + "!";

console.log(seungyeon);

 

이러한 불편함을 해결해 줄수 있는 것이 자바스크립트의 백틱 사용입니다. 많은 개발자들이 백틱을 많이 사용하고 있고, 

아래와 작성 방식을 참고해주셔요. (백틱 안에 자유롭게 문자를 작성하시고 변수명은 변수명은 ${} 안에 작성합니다)

const jonasNew = `I'm ${firstName}, a ${year - birthYear} years old ${job}!`;

console.log(jonasNew);

 

또한 백틱을 사용하지 않는다면 \n을 줄바꿈 하고 싶은 위치에 작성하여야 하는에 백틱을 사용한다면 작성할 필요가 없습니다.

console.log("Just a regular\n string...\n haha.."); // 일반 문자열 작성시에는 \n으로 작성

console.log(`Just a regular  // 백틱사용시에는 엔터키로 줄바꿈을 해주면 됨

string...

haha..`);

 

(백틱 내에서 엔터키로 줄바꿈을 하면 프론트에 그대로 노출이 됩니다)

 

 

 

 🤍 감사합니다.🤍