JAVASCRIPT Backtick

JavaScript를 공부하다가 잘 이해가 안가고 왜 쓰이는지 어디에 쓰이는지 고민하다가 깊게 파보았다.

backtick ( ` )

JavaScript에서 템플릿 리터럴에 활용되는 문자가 있다. 이것을 억음부호 backtick(이하 백틱)이라고 하는데 ( ' )와 많이 혼동하기 쉽다. 

JavaScript에서 백틱( ` )을 사용하여 문자열을 표현하는 것을 "템플릿 리터럴" 이라한다.

에 위치해 있으며 이는 기존의 작은따옴표( ' )나 큰따옴표( " ) 대신에 백틱( ` )을 사용하여 문자열을 작성하는 기능이다.

템플릿 리터럴은 여러가지 장점과 유용한 기능을 제공한다.

 

• 다중 줄 문자열
  백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있다. 기존에 역슬래쉬를 사용하여 줄바꿈을 해야 했지만, 백틱을 사용하면 줄 바꿈을 할 필요 없이 자연스럽게 문자열을 작성할 수 있다.

const multiLineString = `이것은
여러 줄에 걸친
문자열입니다.`;

console.log(multiLineString);
//출력 :
//이것은
//여러 줄에 걸친
//문자열입니다.

• 표현식 삽입
  백틱 문자열 안에서 "${표현식}" 형태로 변수나 표현식을 삽입 할 수 있다. 이를 통해 동적으로 문자열을 생성하거나 변수 값을 쉽게 포함시킬 수 있다.

const name = "Alice";
const greeting = `안녕하세요, ${name}님!`;

console.log(greeting);
//출력 : 안녕하세요, Alice님!

• 문자열 연결 간소화
  백틱을 사용하면 문자열 연결(concatenation)을 위해 + 연산자를 사용할 필요가 없다. 대신에 템플릿 리터럴 안에서 변수와 텍스트를 함께 사용할 수 있다.

const firstName = "John";
const lastName = "Doe";

const fullName = `${firstName} ${lastName}`;

console.log(fullName);
//출력 : John Doe

• 조건부 문자열 생성
  템플릿 리터럴 안에서 조건문(if문 또는 삼항 연산자)을 사용하여 동적으로 문자열을 생성할 수 있다.

const isLoggedIn = true;
const greeting = `안녕하세요, ${isLoggedIn ? "회원님" : "손님"}!`;

console.log(greeting);
//출력 : 안녕하세요, 회원님!

• 특수 무자 이스케이프
  백틱 문자열은 특수 문자(예: 작은따옴표, 큰따옴표, 역슬래시)를 이스케이프 처리하지 않아도 된다. 즉, 이스케이프 문자를 사용하지 않고도 특수 문자를 그대로 포함할 수 있다.

const stringWithSpecialChars = `특수 문자 : ' " \ ` \\`;

console.log(stringWithSpecialChars);
//출력 : 특수 문자 : ' " ` \

이처럼 백틱 문자열은 보다 가독성이 높은 코드를 작성할 수 있도록 도와주며, 문자열 조립이나 동적인 문자열 생성에 편리하게 사용된다. 특히 HTML 템플릿 작성, 서버 측 렌더링, 문자열 처리 등 다양한 상황에서 유용하게 활용될 수 있다.