[JavaScript] 문자열 내 문자열 작성 따옴표('), 큰따옴표(") 구분

Javascript는 기본 문자열 표기를 따옴표(') 또는 큰따옴표(")를 이용하여 사용한다.

.html() 함수를 통해 다양한 propery가 설정된 html tag를 문자열로 넣거나

따옴표, 큰따옴표가 여러개 혼용된 문자열을 변수로 사용할 경우 문제가 발생한다.

이 때 처리 방법이 혼동되는 경우가 있어 정리한다.

 

아래의 태그를 문자열로 담아 꺼내 쓰려고 한다.

//담고자 하는 tag
<a href="#" type="text" class="test" onclick="javascript:function("${functionName}")">저장</a>

//변수에 저장
const saveTag = "<a href="#" type="text" class="test" onclick="javascript:function("${functionName}")">저장</a>";

//Jquery html 뿌리기
$("div.test").html(saveTag);

 

a tag안에 onclick 시 Javascript function을 실행하는데 function 명을 동적으로 받아 처리하는 태그이다.

이 태그를 통째로 큰따옴표에 담아 변수에 저장하여 html로 뿌려 정상적으로 작동하게 해야한다.

 

Javascript에서는 큰따옴표(")를 문자열의 시작과 끝을 알리기 때문에 문자열 맨 앞과 뒤에 써준다.

큰따옴표로 둘러쌓인 문자열 내부 큰따옴표가 있을 경우 문자열의 끝과 새로운 시작으로 인식하기 때문에

내부에서 감쌀 때는 작은따옴표(') 혹은 역슬래시+큰따옴표(\")를 써준다.

역슬래시+작은따옴표(\') 역시 쓰이지만 가독성을 위해서는 " > \" > ' 순서로 써주는 것이 좋다.

 

Depth가 2개일 경우 " > '

Depth가 3개일 경우 " > \" > '

 

아래 예시처럼 주석처리한 tag도 정상 작동하지만 개인적으로 큰따옴표에서 작은따옴표로 가는 것이 가독성이 좋다.

const saveTag = "<a href='#' type='text' class='test' onclick=\"javascript:function('${functionName}')\">저장</a>";

//이런식으로 해도 문제는 없지만 가독성이 떨어짐
//const saveTag = '<a href="#" type="text" class="test" onclick=\'javascript:function(\'${functionName}\')'>저장</a>';

//Jquery html 뿌리기
$("div.test").html(saveTag);