JavaScript 템플릿 리터럴이 작동하지 않음

일부 ${string} 또는 "일부 ${string}"과 같은 JavaScript 템플릿 리터럴을 활용하려고 하면 사용자에게 문제가 발생할 수 있습니다. 값 대신 리터럴 변수 이름이 표시됩니다. 이 문제는 특정 브라우저 버전이나 jQuery와 같은 개발 프레임워크에만 국한되지 않습니다.

해결책: 백틱 사용

이 문제를 해결하려면 기존 단일 대신 백틱(`)을 사용하는 것이 중요합니다. 또는 큰따옴표. 일반적으로 "억음 악센트"라고 하는 백틱은 표준 QWERTY 키보드의 숫자 1 키 옆에 있습니다.

예:

// Incorrect approach
console.log('categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} ');

// Correct approach using backticks
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} `);

백틱을 사용하면 템플릿 리터럴을 올바르게 호출하고 원하는 변수 값을 표시할 수 있습니다.