[JSP] JSP에서 JavaScript 템플릿 문자열(${...}, Template literals) 사용 방법 [JavaScript 백틱 사용이 안될 때]

---

- JavaScript 백틱 사용이 안될 때

jsp를 사용할 경우, jsp의 EL 표현식과 JavaScript의 템플릿 문자열이 겹치게 된다.
아래의 코드는 jsp 엔진을 거치지 않으면 정상적으로 동작한다.

var today = '2023-07-25';
var msg = `오늘은 ${today} 입니다.`; // 오늘은 2023-07-25 입니다.

 

그러나, jsp 엔진을 거치게 되면 아래와 같게 변한다.
  1) page, request, session, context 에서 "today"라는 이름표가 붙은 값을 찾는다.
  2) null이면 아무것도 출력하지 않고 EL 표현식(${...})을 없앤다.
  3) null 이 아니면 EL 표현식(${...})에 toString() 값을 넣는다.

// Controller
request.setAtteinute("today", "TUESDAY");

// view
var today = '2023-07-25';
var msg = `오늘은 ${today} 입니다.`; // 오늘은 TUESDAY 입니다.

 

해결방법으로는 JavaScript의 템플릿 문자열을 EL 표현식으로 감싸주면 된다.
이렇게 하면 바깥쪽 ${...}은 서버에서 처리하고, 안쪽 ${...}은 자바스크립트가 처리한다.

var today = '2023-07-25';
var msg = `오늘은 ${ "${today}" } 입니다.`; // 오늘은 2023-07-25 입니다.

---

- 참고자료

OKKY - [JavaScript] `${}` 의 사용법 (연결 대신 템플릿 문자열 사용 - Use template strings instead of concatenatio

---