[200제] 06. `${변수}` 백틱(backtick)을 이용한 포맷팅

때는 바야흐로 몇 주전.. 국비 교육중 마지막 수업이 web 수업을 들을때였다. 

마지막 1~2주 정도를 프로젝트를 진행하는데 갑자기 강사님께서 백틱을 입력 하라는 말을 하셨고

백틱이 어디에 있는거지? 라고 헤매었던 기억이 있다. 이 백틱이 있는지는 알고 있었지만 어디에 사용하는지는 몰랐었다.

 

이번에 처음 써보는 문자 백틱이였다. 

 

✅백틱이란?

• 기호 :  `  키보드에서 보통 숫자키 1옆에 있는 키 ~와 같은 키에 있음
• 용어: backtick 또는 grave accent 라고 함
• 용도: 프로그래밍에서 문자열 처리, 명령 실행, 포맷팅 등에 사용되는 특수 문자.

✅Node.js 에서 백틱의 의미

• 탬플릿 리터럴을 정의 할 때 문자열을 감싸는 기호
• 특징
  • 변수/표현식 삽입가능 → `${변수}`
  • 멀티라인 문자열 지침 → 줄바꿈 그대로
  • 태그드 플릿 지원 → 백틱 앞에 함수 붙여 처리 가능

//예제 1: 변수와 표현식 삽입

const name = "Roy";

const age = 29;

const score = 88;

const message = `이름: ${name}, 나이: ${age}, 점수: ${score + 2}`;

console.log(message);

// 출력: 이름: Roy, 나이: 29, 점수: 90

//예제 2: 멀티라인 문자열

const poem = `

장점:

- 가독성 좋음

- 줄바꿈 그대로 유지

- 표현식도 가능: ${1 + 2}

`;

console.log(poem);

/*

장점:

- 가독성 좋음

- 줄바꿈 그대로 유지

- 표현식도 가능: 3

*/

//예제 3: 태그드 템플릿

function emphasize(strings, ...values) {

  return strings.reduce((result, str, i) => {

    const value = values[i] ? `**${values[i]}**` : '';

    return result + str + value;

  }, '');

}

const name = "Roy";

const hobby = "coding";

const text = emphasize`안녕하세요, ${name}! 당신의 취미는 ${hobby}입니다.`;

console.log(text);

// 출력: 안녕하세요, **Roy**! 당신의 취미는 **coding**입니다.

---

참고:
본 내용은 「초보자를 위한 Node.js 200제」(김경록님, 정지현님)를 기반으로 하였으며,
본 글은 개인 공부용으로 작성되었으며 상업적 사용은 불가합니다.