자바 스크립트 내가 궁금 가독성

Question

에 대한 문자열에 캐리지 리턴을 추가, 나는 긴 문자열을 가지고 유지 보수성 및 가독성을 위해 나는과 같이 코드에 줄 바꿈을 넣어하는 방법 그렇다면 :

slices += 
    '<div 
     class="'+settings.sliceClass+'" 
     style=" 
      width:' + slicewidth + 'px; 
      height:' + sliceheight + 'px; 
      left:' + left + 'px; 
      top:' + top + 'px; 
    "><img src="'+slide.properties.src+'" 
     style=" 
      position: relative; 
      left:' + -left + 'px; 
      top:' + -top + 'px; 
      width:' + Math.round(slide.properties.image.width * slide.properties.scale.width) + 'px; 
      height:' + Math.round(slide.properties.image.height * slide.properties.scale.height) + 'px; 
    "> 
    </img></div>' 
); 

HTML 출력에 이러한 줄 바꿈이 나타나기를 기대하지 않습니다.

그러나 이것은 SyntaxError: Unexpected EOF을 반환합니다.

어쨌든 이것을 할 수 있습니까?

Answer 1

아니요. 문자열에는 이스케이프 처리되지 않은 줄 바꿈을 사용할 수 없으며 줄 연속 만 포함 할 수 있습니다. 즉, 출력 문자열에 들여 쓰기 공백을 가져옵니다. 스펙의 수술 부분은 section 7.8.4입니다 :

SingleStringCharacter :: 
    SourceCharacter but not single-quote or backslash or LineTerminator 
    | \ EscapeSequence 
    | LineContinuation 

은 "하지만 ... 또는 LineTerminator"일부 문자열은 줄 바꿈을 포함 할 수 있음을 의미하지만은 "| LineContinuation"이란 \ < LineTerminator 그 >은 정상입니다. 문자열 값을 읽음 LineContinuation은 전체적으로 인용 된 문자열의 문자열 값에 기여하지 않으며 선행 공백을 전혀 먹지 않는다는 것을 보여줍니다.

당신은

slices += 
    ['<div', 
     ' class="', settings.sliceClass, '"', 
     ' style="', 
    ... 
    ].join(''); 

배열에서 각 행을 요소를 확인하고 빈 문자열에 가입 할 수 있습니다.

나중에 -left보다 복잡한 숫자 연산을 수행하도록 코드를 나중에 변경하면 수치 연산자와 +이 문자열 연결에 사용되는 혼란을 피할 수 있습니다.

Answer 2

그냥 각 라인을 깨는 앞에 백 슬래시를 추가

var str = "sfdsadadadas\ 
      asdasdasdasdasd\ 
      sdfsdfsfsd"; 

각 백 슬래시 다음 행 에 (들여 쓰기) 내용 사이의 공간이 문자열의 일부가 될 것이라는 점을 명심하십시오. 미리 서식이 지정된 텍스트 (예 : <pre> 태그의 내용)를 사용하지 않는 한 HTML 출력에 문제가 없어야합니다.

Answer 3

수정 코드 :.

slices +=  '<div'+ 
      'class="'+settings.sliceClass+'"'+ 
      ..... 

또는 배열

var temp = [ 
      '<div', 
      'class="'+settings.sliceClass+'"', 
      ... 

      '</img></div>' 
    ]; 
slices += temp.join(""); 

Answer 4

의 도움을 teke 수 있습니다 나는 문제가 ' (작은 따옴표)를 사용으로 인해 그 내부 " (큰 따옴표)를 가지고 생각합니다. 그래서 저는 따옴표를 벗어나려고 노력하고 있습니다.

var component = "<div class=\"rounded-border\">" + 
    "<p>Sample Content here " + dynamicValue + "</p>" + 
    "</div>"; 

p.s. + 연산자의 사용에주의하십시오. 이는 매우 유용하며 데이터 이 다음 행에서 변경되지 않는다는 것을 보장합니다. 그렇지 않으면 캐리지 리턴이나 공백이있을 수 있습니다.

Answer 5

slices += 
     '<div' + 
      'class="'+settings.sliceClass+'"' + 
      'style="' + 
       'width:' + slicewidth + 'px;' + 
       'height:' + sliceheight + 'px;' + 
       'left:' + left + 'px;' + 
       'top:' + top + 'px;' + 
     '">' + 
     '<img src="'+slide.properties.src+'"' + 
      'style="' + 
      'position: relative;' + 
       'left:' + -left + 'px;' + 
       'top:' + -top + 'px;' + 
       'width:' + Math.round(slide.properties.image.width * slide.properties.scale.width) + 'px;' + 
       'height:' + Math.round(slide.properties.image.height * slide.properties.scale.height) + 'px;' + 
     '" />' + 
     '</div>';