연결하지 않고 JavaScript에서 문자열의 변수를 보간하는 방법

질문 : 연결하지 않고 JavaScript에서 문자열의 변수를 보간하는 방법은 무엇입니까?

---

PHP에서 다음과 같이 할 수 있다는 것을 알고 있습니다.

$hello = "foo";
$my_string = "I pity the $hello";

출력 : "I pity the foo"

JavaScript에서도 이와 동일한 것이 가능한지 궁금합니다. 연결을 사용하지 않고 문자열 내에서 변수를 사용하면 작성하는 것이 더 간결하고 우아해 보입니다.

답변

---

템플릿 리터럴 을 활용하고 다음 구문을 사용할 수 있습니다.

`String text ${expression}`

템플릿 리터럴은 큰 따옴표 나 작은 따옴표 대신 역 따옴표 (``) (억음 악센트)로 묶습니다.

이 기능은 ES2015 (ES6)에서 도입되었습니다.

예

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

얼마나 깔끔한가요?

보너스:

또한 이스케이프 처리없이 자바 스크립트에서 여러 줄 문자열을 허용하므로 템플릿에 적합합니다.

return `
    <div class="${foo}">
         ...
    </div>
`;

브라우저 지원 :

이 구문은 이전 브라우저 (대부분 Internet Explorer)에서 지원되지 않으므로 Babel / Webpack을 사용하여 코드를 ES5로 트랜스 파일하여 어디서나 실행되도록 할 수 있습니다.

참고 :

console.log 내에서 기본 문자열 형식을 사용할 수 있습니다.

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.

출처 : https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation