Javascript 문자열 처리 "" 혹은 '' 대신, 이제 ``를 사용하세요.

문자열 처리 시 보통 큰 따옴표("")와 작은 따옴표('')를 사용합니다. 하지만, 이제 백틱(``)을 사용해서 좀 더 편하고 직관적으로 코딩하여 가독성을 높여보세요. 보통 Template literals라고 하는데, 이에 대해 알아보도록 하겠습니다.

Template literals는 ES6부터 추가된 문자열 표기법 중 하나로, 문자열 안에서 변수나 표현식을 쉽게 삽입할 수 있도록 해주는 문법입니다. 기존의 문자열 표기법과는 다르게 백틱(``)으로 문자열을 감싸며, ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

기존 처리 방식("" 혹은 '') 사용:

const name = "Alice";
const age = 30;

console.log('My name is ' + name + ' and I am ' + age +' years old.');

const num = 1 + 2;
console.log('1 + 2 = ' + num);

백틱(``) 사용 예시:

const name = "Alice";
const age = 30;

// 변수를 삽입하는 예시
console.log(`My name is ${name} and I am ${age} years old.`);

// 표현식을 삽입하는 예시
console.log(`1 + 2 = ${1 + 2}`);

소스가 한 결 간소화 되고, 직관적으로 변경되었죠?

위 예시에서는, 백틱으로 감싼 문자열 안에서 ${}를 사용하여 변수 name과 age를 삽입하였고, 또한 표현식 ${1 + 2}도 삽입하였습니다. 이러한 방식으로 문자열을 쉽게 작성할 수 있습니다.

Template literals는 여러 줄로 이루어진 문자열을 작성할 때도 유용합니다. 기존의 문자열 표기법에서는 여러 줄의 문자열을 작성할 때 개행 문자를 사용해야 했지만, Template literals에서는 그냥 엔터를 입력하면 자동으로 개행이 되기 때문입니다.

const message = `안녕하세요,
반갑습니다.`;

console.log(message);
// 안녕하세요,
// 반갑습니다.

Template literals는 문자열을 간편하게 작성할 수 있도록 해주는 문법이며, 문자열 안에서 변수나 표현식을 쉽게 삽입할 수 있다는 장점이 있습니다.

더 자세한 내용은 아래 MDN 문서를 참고하시기 바랍니다.

Template literals (Template strings) - JavaScript | MDN