자바스크립트 ES6에서 백틱(`) 방식(esc 아래 있는 키)이 추가되었습니다.
(영문키로 변경 후 눌러주세요)
백틱은 어떨 때 사용할까요?
JavaScript에서 백틱(`)은 템플릿 리터럴(template literal)을 나타내는 데 사용됩니다.
백틱은 기존의 따옴표('작은따옴표' 또는 "큰따옴표") 대신 사용할 수 있으며, 여러 줄로 이루어진 문자열과 표현식의 삽입을 편리하게 작성할 수 있도록 도와줍니다.
기존의 따옴표로 둘러싸인 문자열을 사용할 때는 여러 줄을 작성하기 위해 줄 바꿈 문자(\n)를 사용해야 했습니다. 또한, 문자열과 변수 값을 함께 사용하려면 문자열 연결(concatenation) 연산자인 +를 사용해야 했습니다.
아래는 기존의 따옴표를 사용한 코드와 백틱을 사용한 코드의 비교 예시입니다.
기존 따옴표 사용
// 기존 따옴표 사용
var name = 'John';
var age = 25;
var message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message);
ES6에 추가된 백틱 방식
// 백틱 사용
var name = 'John';
var age = 25;
var message = `My name is ${name} and I am ${age} years old.`;
console.log(message);
백틱을 사용한 코드에서는 ${} 내부에 변수 또는 표현식을 넣을 수 있습니다. 이렇게 작성하면 변수의 값이 문자열에 자동으로 삽입됩니다. 또한, 여러 줄로 이루어진 문자열을 백틱 안에서 바로 작성할 수 있습니다. 백틱을 사용하면 문자열을 더욱 가독성 있게 작성할 수 있으며, 변수 값의 삽입과 줄 바꿈을 편리하게 처리할 수 있습니다.
줄 바꿈 할 때 비교 예시
기존 따옴표 방식
// 기존 따옴표 사용
var name = 'John';
var age = 25;
var message = 'My name is ' + name + ' and\nI am ' + age + ' years old.';
console.log(message);
"\n"는 이스케이프 시퀀스(escape sequence) 중 하나로, 줄 바꿈을 나타내는 제어 문자(control character)입니다. "\n"은 "newline"이라고 불리며, 문자열 내에서 사용되면 다음 줄로 이동하여 줄을 바꿉니다. 이스케이프 시퀀스는 특정 문자를 특수한 의미로 해석하도록 하는 특수한 문자 조합입니다.
ES6에 추가된 백틱 방식
// 백틱 사용
var name = 'John';
var age = 25;
var message = `My name is ${name} and
I am ${age} years old.`;
console.log(message);
기존의 따옴표를 사용한 코드에서는 줄바꿈을 표현하기 위해 \n을 사용해야 했습니다. 반면에 백틱을 사용한 코드에서는 줄바꿈을 그대로 작성할 수 있습니다. 이렇게 하면 코드를 보다 가독성 있게 작성할 수 있으며, 특히 긴 문자열이나 여러 줄로 구성된 문자열을 다룰 때 유용합니다. 백틱을 사용하면 줄바꿈을 간편하게 처리할 수 있으며, 코드의 가독성을 향상할 수 있습니다.
