[jsp] JSTL과 EL 안에서 문자열 이어붙이는 법 concat() 기능 '+' 연산

- '+' 기호 연산은 작동하지 않는다 -

<c:set id="${'ele'+itemIndex}" /> 
<c:set id="${'ele'}+${itemIndex}" /> 
<c:set id="${'ele'}${itemIndex}" />

JSTL 안에서 EL을 사용할 때 문자열을 이어붙이려면 
위 세 코드 중 어떤 코드를 써야 할까?

EL 문법에서는 더하기 '+' 기호로 문자열을 이어붙이지 못한다.
문자열 함수를 이용해서 두 문자열을 합쳐야 할까?

 

 

- EL 문법으로 문자열 이어붙이는 법 -

EL 문법에서 문자열을 이어붙이려면
그냥 이어붙일 두 문자열을 EL 그대로 붙여 놓으면 된다.

그래서 정답은 가장 아래 코드다.

<c:set id="${'ele'}${itemIndex}" />

위처럼 쓰면  ${~~} 구문 여러 개가 각각 파싱되어서 
로드될 때는 "~~" 안에서 이어붙여져 있는 것처럼 보이게 된다.

 

- 덧붙임 : JSTL에서 썼던 변수를 화면까지 가져오는 법

화면을 로드하면서 사용했던 JSTL과 EL의 결과를
ready 함수에서 html요소 안에 저장함으로써
html 요소에서도 index를 그대로 이어서 사용할 수 있도록 할 수도 있다.

 

// html body

<input type="hidden" id="fruitIndex" value="" />

<c:set var="curIndex" value="0" />    <!-- index를 0으로 초기화 -->
<c:forEach var="fruit" item="${fruitList}" varStatus="g" >
    <a id="${'fruit'}${curIndex}">    <!-- index를 이용해서 id를 부여 -->
    <c:set var="curIndex" value="${curIndex+1}" />  <!-- index를 1 증가시킴 -->
</c:forEach>

// script

document.addEventListener('DOMContentLoaded', function() {
    // 위에서 사용했던 curIndex의 마지막 값을 html 에서도 사용하기 위해서 hidden 요소에 저장
    document.querySelector('#fruitIndex').value = "${curIndex}";
});

- 220720