[JS] JS String literal "" '' 줄바꿈

JS String literal "" ''  줄바꿈

요약 : 1. 템플릿 리터럴 사용 2. \(back slash) 사용 3. ""와 + 로 연결 

오늘 굉장히 부끄럽고 충격적인 경험을 했습니다.

저는 JS에서 문자열 리터럴("", '')에서 줄바꿈이 가능한줄 알고 있었습니다. 

그런데 그게 아니었습니다. 굉장히 간단한 것 때문에 의문도 모른채 당황했습니다.

저는 이러한 코드를 작성하려고 했습니다.

$(".main").html('
    <div class=\"frame left extentionapply\">
    <div class=\"frametitle\">
    <h1>연장신청</h1>
    <div class=\"underline blue\"></div></div>
    <div class=\"seatcontainer\"></div></div>
');

미리 작성해둔 html을 단순히 삽입하기만 하는 아주 간단한 작업이었습니다.

아주 당연히 잘 작동할것 같은 코드가 에러를 뿜었습니다.

Uncaught SyntaxError: Invalid or unexpected token

답은 문자열 리터럴에서의 줄바꿈이었습니다. 

한줄에 작성하면 오류없이 실행 되었습니다.

하지만 가독성을 위해서 줄을바꾸는 선택을 하였기 때문에 알아보았습니다.

크게 3가지 방법을 알게 되었습니다.

1. Template Litetal / Template String

가장 간단한 방법입니다.

문자열 리터럴을 템플릿 리터럴로 바꾸기만 하면 됩니다.

템플릿 리터럴은 ecmascript 6에 등장한 문법입니다. 

템플릿 리터럴을 사용하기위해서는 ``을 사용해야 합니다. 이를 백틱(back-tick)이라고 합니다.

(키보드에서 ~를 시프트 없이 누르시면 됩니다.)

템플릿 리터럴은 스트링 리터럴을 사용할 경우 발생하던 많은 귀찮은 문제들을 해결해 줍니다.

첫 째로, 현재 상황과 같은 문제입니다.

템플릿 리터럴은 멀티라인 스트링을 굉장히 간단한 코드를 사용하게 합니다.

$(".main").html(`
    <div class=\"frame left extentionapply\">
    <div class=\"frametitle\">
    <h1>연장신청</h1>
    <div class=\"underline blue\"></div></div>
    <div class=\"seatcontainer\"></div></div>
`);

이렇게 스트링 리터럴을 템플릿 리터럴로 바꾸어 주기만 하면, 됩니다. 

또 문자열에 표현식을 넣는것도 가능해 졌습니다. 기존에는 "" + "" + "" 같이 어쩌면 불편한 방법으로 사용해왔는데 이제는 그럴 필요가 없어졌습니다.  아래는 표현식 사용 예 입니다. $()을 사용합니다.

 

$(".main").html(`
    $(twice.momo.name)님의 레벨은 $(twice.momo.level)lv 입니다.
`);

 

그러나 템플릿 리터럴에는 굉장히 치명적인 단점이 있습니다. 

ecmascript 6에 등장했다는 점입니다. 그래서 구 버전의 브라우저에서는 사용이 불가능 합니다. (ㅠㅠ)

자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

2. /(back slach) 사용

두번 째로 간단한 방법이었습니다.

스트링 문자열안의 줄바꿈의 끝마다 \(back slash)를 사용하는 것입니다.

아래와 같이 줄을 바꾼 부분마다 \를 사용하면 줄바꿈이 성공적으로 완료됩니다.

저는 이 방법을 사용하였습니다.

$(".main").html('\
    <div class=\"frame left extentionapply\">\
    <div class=\"frametitle\">\
    <h1>연장신청</h1>\
    <div class=\"underline blue\"></div></div>\
    <div class=\"seatcontainer\"></div></div>');

3. "" + "" 사용

가장 귀찮은 방법입니다. 

""와 + 로 연결합니다.

$(".main").html(
    "<div class=\"frame left extentionapply\">" + 
    "<div class=\"frametitle\">" + 
    "<h1>연장신청</h1>" + 
    "<div class=\"underline blue\"></div></div>" + 
    "<div class=\"seatcontainer\"></div></div>");

1번째와 3번째는 알고 있던 방법이었는데, 2번째는 이번에 처음 알게된 방법이었습니다.

무엇보다 제가 스트링 리터럴에서 그냥 줄바꿈을 시도했다는 것이 굉장히 충격적이었습니다.