JSP javascript 백틱 `${}` 안될때

jsp script 부분에서 백틱 출력이 안되는 현상..

<script>
    const name = "홍길동";
    const message = `안녕하세요 ${name}님`; // ---> [안녕하세요 님] 으로 출력됨
    console.log(message);
</script>

---

✅ 이유?

JS에서 변수 치환하려고 쓴 ${name}을 JSP가 먼저 봐버리고,

이걸 자기가 처리해야 할 EL 문법이라고 착각해서

잘못 처리해버리는 상황이 발생!!

---

✅ 해결방법 (무려 4가지..!)

1️⃣ $ 앞에 \ or \\ 넣기 (JSP가 무시하게 하기)

<script>
    const name = "홍길동";
    const message = `안녕하세요 \${name}님`; // 이렇게 하면 JSP가 무시함!
    console.log(message);
</script>

 

2️⃣ ${} 로 감싸기

<script>
    const name = "홍길동";
    const message = `안녕하세요 ${'${name}'}님`;
</script>

 

3️⃣ $를 문자열로 처리해서 JavaScript가 다시 해석하게 하기

<script>
  const name = "홍길동";
  const msg = `안녕하세요 ${'$'}{name}님`;
</script>

 

4️⃣ 백엔드 데이터를 JavaScript 변수에 옮기기

<script>
    const name = "<%= userName %>";
    const message = `안녕하세요 ${name}님`;
</script>