javascript ` (백틱) 자바스크립트 백틱

 

 

키보드 왼쪽 상위 물결표시 아래에    `    를 볼 수 있는데 이것을 백틱이라 한다.

 

자바스크립트에서 문자열을 표현할때 보통 " " 혹은 ' ' 안에 쓰는데

javascript 문자열 표현

ex. console.log('안녕하세요')

 

문자열에 변수를 포함하여 작성할때 보통 + 를 사용하여 작성하는데

ex.

var name = '홍길동'

console.log('제 이름은 '  + name +'입니다.')

 

문자열이 길어질수록 계속 + 를 사용하는것이 번거로운데 이때 ( ` ) 백틱을 사용하면 좋다.

( ` ) 백틱 사용방법:

변수나 함수 이름 앞에 $ 를 붙이고  { } 중괄호로 감싸주면 된다.

ex. ${name}

 

 

 

------------------------------------------------------------------------------------------------------------------------------------

 

var name = '홍길동'

var age = '20'

//문자열에 변수를 사용하는 일반적인 방법

console.log( ' 안녕하세요. '  +  '  제 이름은 '   + name + ' 입니다. '  +  ' 나이는 ' + age + ' 살 입니다. ' );

            -> 내 이름은 홍길동

//( ' ' ) 백틱을 사용하는 방법

console.log(  `  안녕하세요.  제 이름은  ${name} 입니다. 나이는 ${age} 살 입니다.  `  );

 

------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 [ 또다른 예시 ]

 

아래와같이  ( ` ) 백틱과  ' + ' 를 사용한 이유는

javascript의  ( ` ) 백틱과 ${ } 를 사용하면 

jstl 문법인 ${ } 으로 인식이 먼저되는건지 javascript로 인식을 못해서 + 를 사용함 

   function fnSelectList(){

  $.ajax({

    url : '/abc/ddd/selectListAjax.do',

    type : 'post',

    dataType : 'json',

    traditional: true,

    data : {},

    success : function(response) {

            $('#areaList').html(' ');

            for(item of response.resultList){  [이 ` 의 끝은 ]                                                                                              [ 여기]

                           $('#areaList').append (      `   <button type="button" class="btn btn-sm mr-1" style="background : `  + item.LIST_COLOR  + `  ;color:white" onclick="fnSelect( ` + item.LIST_SEQ + ` )"> ` + item.LIST_NM + ` </button> ` )                                                                                      

                    }    

           },

      error : function(request, status, error){

                ajaxJsonErrorAlert(request,status,error);

          }

     });

}