How to use ``(template literals) correctly in JSP

As in the example below, ``(template literals) did not work properly, and my code almost ended up long and messy.

But through a Google search, I found out why ``(template literals) don't work in JSP and how to fix it.

When you use JSP, JSP's EL expressions and JavaScript's template strings overlap, and that seems to be why it didn't work properly.

So I confirmed that it works correctly when the code is written like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24paintFilmDataList.forEach((filmData) => {
  const filmBox = document.querySelector('.' + filmData.position);

  // if (filmBox) {
  //     filmBox.innerHTML =
  //         '<div class="paintFilmShame">' + filmData.maxThicknessMeasurement.toString() + '</div>' +
  //         '<span class="paintFilmShameBar">'+ '|' +'</span>' +
  //         '<div class="paintFilmShame">' + filmData.minThicknessMeasurement.toString() + '</div>' +
  //         '<span class="paintFilmShameBar">'+ '|' +'</span>' +
  //         '<div class="paintFilmShame">' + filmData.averageThicknessMeasurement.toString() + '</div>';
  // }

  // To use ``(template literals) in a JSP file, you have to apply it as below
  // This way the outer ${...} is handled on the server, and the inner ${...} is handled by JavaScript.

  if (filmBox) {
    filmBox.innerHTML = `<div class="paintFilmShame">${'${filmData.maxThicknessMeasurement.toString()}'}</div>
                            <span class="paintFilmShameBar">|</span>
                            <div class="paintFilmShame">${'${filmData.minThicknessMeasurement.toString()}'}</div>
                            <span class="paintFilmShameBar">|</span>
                            <div class="paintFilmShame">${'${filmData.averageThicknessMeasurement.toString()}'}</div>
                            `;
  }
});

How to use ``(template literals) correctly in JSP

More in Work