타임리프(Thymeleaf) 자바스크립트 인라인

문법

• th:inline="javascript"

    <script>
      var username1 = [[${user.userNm}]];
      var age = [[${user.age}]];

      var username2 = /*[[${user.userNm}]]*/ "test username";

      var user = [[${user}]];
    </script>

    <script th:inline="javascript">
        var username1 = [[${user.userNm}]];
        var age = [[${user.age}]];

        var username2 = /*[[${user.userNm}]]*/ "test username";

        var user = [[${user}]];
    </script>

    <script th:inline="javascript">

        [# th:each="user, stat : ${list}" ]
            var user[[${stat.count}]] = [[${user}]];
        [/]
    </script>

위의 코드를 실행하면 아래와 같은 결과가 나온다.

<script>
    var username1 = USER; <== malformed 오류가 난다.
    var age = 1;

    var username2 = /*USER*/ "test username"; <== 문자 그대로 해석

    var user = UserDTO(userNm=USER, age=1); <= 객체의 toString 메서드를 호출
</script>
<script>
    var username1 = "USER";  <== 자동으로 문자열로 변경
    var pswdErrCnt = 1;

    var username2 = "USER";  <== 주석 이후의 문자열을 무시

    var user = {"userNm":"USER","age":1}; <== 타임리프의 JS 직렬방식은 기본적으로 클래스패스의 Jackson library를 기본 구현으로 한다.
</script>
<script>  
    var user1 = {"userNm":"\uAC15\uC6D0\uB18D\uAE30\uC6D001","age":1};
    var user2 = {"userNm":"\uAC15\uC6D0\uB18D\uAE30\uC6D001","age":1};
    var user3 = {"userNm":"\uAC15\uC6D0\uB18D\uAE30\uC6D001","age":1};
    var user4 = {"userNm":"\uAC15\uC6D0\uB18D\uAE30\uC6D001","age":1};    
</script>