[Javascript/js] 문자열(string) 내부(안)에 변수/상수 값 넣는 방법, 삽입하기. Template literals과 여러줄 문자열, 백틱(`)

1. 문제점

Javascript 를 사용하면서 문자열 내부(안)에 변수/상수 값을 넣고 싶은 케이스가 존재합니다. 가장 간단하게는 아래와 같이 사용할 수 있는데요.

let a,b;
a = 1111;
b = "any value";

console.log("a = " + a + ", b = " + b);

// 결과
// a = 1111, b = any value

이렇게 사용하면 문자열이 많아지면 사용하기도 복잡해지고 가시성도 떨어집니다. 어떻게 해야 손쉽게 문자열 내부에 변수를 사용할 수 있을까요?

2. 해결방법

JS가 ES6 버전부터는 더 사용하기 쉽게, 문자열에서 변수명을 사용할 수 있도록 하는 기능을 추가해주었습니다. 사용법은 매우 간단하게 ` 를 사용하여 문자열을 작성하고, 내부에 변수를 추가해주려면 ${} 안에 사용하면 됩니다.

let a,b;
a = 1111;
b = "any value";

console.log(`a = ${a} , b = ${b} `);

// 결과
// a = 1111, b = any value

아래와 같이 ` 대신에 “ 를 사용하게 되면 제대로 변수가 출력되지 않습니다.

let a,b;
a = 1111;
b = "any value";

console.log("a = ${a} , b = ${b} ");

// 결과
// a = ${a} , b = ${b} 

템플릿 리터럴을 사용하여 조금 더 가독성 있는 코드를 작성해볼 수 있습니다!