[Web] Template Literals with JSON in JavaScript

Template Literals

 

ES6에서의 template literal로 쉽게 JSON data를 치환하는 방법을 소개하겠습니다.

 

var x = {
name: 'John Smith',
nickname: 'Johny',
};

 

위의 x 객체는 name과 nickname, 두 개의 속성을 가지고 있습니다.

 

//String concatenation
console.log('Hi, I\'m ' + x.name + '! Call me "' + x.nick_name + '".');

 

예시에서 객체의 속성을 text 형식으로 consol.log()에 나타내기 위해서는 (')를 백슬래시로 피해야하고,

작은 따옴표와 큰 따옴표가 섞여있어, 코드가 무엇을 말하려고 하는지 알아보기 어렵습니다.

 

그러나 똑같은 코드를 실행하지만 가독성을 높일 수 있는 방법이 있습니다.

template literal은 문자열로 작업할 때 JavaScript의 가독성을 향상시킬 수 있는 훌륭한 방법입니다.

 

//Template Literals
console.log(`Hi, I'm ${x.name}! Call me "{x.nick_name}".`)';

 

처음에 사용했던 예시로 template literal을 사용하면 코드를 훨씬 쉽게 읽을 수 있습니다.

 

const str1 = `hello world`;

 

template literal에서는 문자열을 감싸는 따옴표 대신 back-ticks(`)를 사용하고,

 

${variableGoesHere}

 

변수를 표현할 때는 ${...}를 사용합니다.

 

 

 

 

[참고 자료]

https://medium.com/@abhilashk433/template-literals-in-javascipt-924f5629c444