javascript_javascript 기술로 여러 줄 문자열을 만드는 7가지 방법

JS에는 여러 줄 문자열의 표준적인 표현 방법이 없지만, 템플릿을 사용할 때 템플릿의 가독성을 보장하기 위해 필연적으로 여러 줄 문자열을 사용하게 되면서 다양한 방법이 등장하게 되었습니다. 옥 템플릿을 예로 들어 간략하게 요약하고 비교해 보겠습니다.

1. 문자열 추가

다음과 같이 가장 쉽고 일반적으로 사용되는 형태입니다

코드 복사 코드는 다음과 같습니다.

var tmpl =''
'!!! 5'
'html'
' include header'
' body'
' //if IE 6'
' ' .alert.alert-error'
' center 죄송합니다. IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요.'
' ' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 공식 다운로드'
' a(href="https:// www .google.com/intl/en/chrome/browser/") | Chrome 다운로드'
' 헤드 포함'
' .container'
' .row-fluid'
' .span8'
' 메인 차단'
' 페이저바 포함'
' .span4'
' 사이드바 포함' ' 바닥글 포함'
' 스크립트 포함'

장점:

이해하기 쉽고 간단하며 신뢰할 수 있음

단일 문자열에 js 로직을 추가할 수 있을 만큼 유연함

단점:

는 진정한 의미의 여러 줄 문자열이 아닙니다. 실제 여러 줄을 사용하려면 n

을 추가해야 합니다. 숫자가 많아 별표처럼 보이고 '와 "도 못생겼습니다

2. 백슬래시 사용

이를 줄 연속 문자라고 합니다. 많이 사용되는 방법은 아니지만 한 번만 사용하면 중독성이 있습니다.

코드 복사 코드는 다음과 같습니다.

var tmpl ='

!!!
html
include header
body
//if IE 6
.alert.alert-error
center 죄송합니다. IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요.
A (href = "http://windows.microsoft.com/zh-in/internet-emlorer/download-d-d-di") | IE8 공식 다운로드
a (href = "https://www.google.com /intl/en/chrome/browser/") | Chrome 다운로드
include head
.container
.row-fluid
.span8
block main
include pagerbar
. span4
사이드바 포함
바닥글 포함
스크립트 포함'


장점:

간단합니다. 각 줄에 하나만 더 있으면 됩니다.
효율적입니다! 이 방법은 대부분의 브라우저에서 가장 빠릅니다.

단점:

치명적인 결함, 각 줄에는 공백이 없어야 합니다. 그렇지 않으면 직접적인 스크립트 오류
는 실제 여러 줄 문자열이 아닙니다. n
을 직접 추가해야 합니다. Node.js 엔진은 이를 지원하지만 ECMAScript의 일부는 아닙니다

3. 문자열 배열 조인

코드 복사 코드는 다음과 같습니다.

var tmpl = [
'! !! 5 ' ,
'html' ,
' 헤더 포함' ,
' 본문' ,
' //IE 6인 경우' ,
' .alert.alert-error' ,
' 센터 죄송합니다. IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요.' ,
' ' 센터 a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download- ie") | IE8 공식 다운로드' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' 페이지 표시줄 포함' ,
' .span4' ,
' 사이드바 포함' ,
' 바닥글 포함' ,
' 스크립트 포함'].join('n');

장점:
실제 여러 줄 문자열

이해하기 쉽고 간단하며 안정적입니다
단일 문자열에 js 로직을 추가할 수 있을 만큼 유연함

단점:

숫자가 많고 ',', 못생긴

5. String.prototype.concat

코드 복사 코드는 다음과 같습니다. :

var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' 헤더 포함' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
center 죄송합니다. IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요.' ,
' a( href ="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 공식 다운로드' ,
' ' a(href="https://www.google. com/ intl/en/chrome/browser/") | Chrome 다운로드' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' 메인 차단' ,
' 페이지 표시줄 포함' ,
' .span4' ,
' 사이드바 포함' ,
' 바닥글 포함' ,
' 스크립트 포함');


장점:

일반적으로 사용되지 않으며 실제로 문자열 연결 방법은 훨씬 덜 일반적입니다
이해하기 쉽고 간단하며 신뢰할 수 있습니다
단일 문자열에 js 로직을 추가할 수 있을 만큼 유연합니다

단점:

실제로는 여러 줄 문자열이 아닙니다
',',"가 많이 있습니다.

5. 여기문서

이것은 함수의 toString 메소드를 사용하는 매우 영리한 솔루션입니다.

코드 복사 코드는 다음과 같습니다.

function heredoc(fn) {
return fn.toString().split('n').slice(1,-1).join('n') 'n'
}

var tmpl = heredoc(function(){/*
!!! 5
html
헤더 포함
본문
//IE 6인 경우
.alert.alert- 오류
                                                                                                             > /en/chrome/browser/") | Chrome 다운로드
헤드 포함
.container
.row-fluid
.span8
사이드바 포함
바닥글 포함
스크립트 포함
*/});


장점:

템플릿 문자열에 추가 문자를 쓸 필요가 없으며 깨끗하고 간단합니다

진정한 여러 줄 문자열 아

단점:

단일 문자열에 js 로직을 추가할 수 없습니다
Yui 압축기는 /*를 사용하여 압축을 방지할 수 있으며 gcc는 특정 항목을 삭제하지 않도록 구성할 수도 있습니다. 댓글은 큰 문제가 되지 않습니다

6. 커피스크립트

언어를 바꾸는 것과 같습니다. 사실, js를 컴파일 대상으로 사용하는 Coffeescript와 같은 언어를 통해 이 언어에 없는 기능을 구현하는 것은 훌륭한 선택입니다.

코드 복사

코드는 다음과 같습니다.

var tmpl = """
!!! 5
html
헤더 포함
본문
//IE 6인 경우
.alert.alert-error 죄송합니다. IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요
a (href = "http://windows.microsoft.com/zh-cn/internet-download-down 다운로드
a (href="https://www.google.com/intl/en/chrome/browser/") | Chrome 다운로드
헤드 포함
.container
.row-fluid
.span8
사이드바 포함
바닥글 포함
스크립트 포함
"""

장점:

이해하기 쉽고 간단하며 신뢰할 수 있습니다

단점:

커피스크립트를 알아야 합니다

파일 전체를 커피스크립트로 작성해야 합니다

7. ES6

ES6에는 Chrome Canary Experimental에서 여러 줄 문자열이 처음으로 구현되었습니다. JavaScript는 이 기능을 사용할 수 있으며, TypeScript도 이 방법을 지원합니다


코드 복사

코드는 다음과 같습니다.var tmpl = `!!! 5

html

include header
body
//IE 6인 경우
.alert.alert-error
Center Sorry , IE6을 지원하지 않습니다. 브라우저를 업그레이드하세요
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 공식 다운로드
(href="https://www.google.com/intl/en/chrome/browser/") | Chrome 다운로드
헤드 포함
.container
.row-fluid
.span8
메인 차단
페이저바 포함
.span4
사이드바 포함
바닥글 포함
스크립트 포함`

장점:

이해하기 쉬움, 기본 지원

진정한 여러 줄 문자열
단점:

제한된 JS 엔진 지원

8. 요약

이러한 글쓰기 방법을 본 후 어떻게 선택하시나요? Coffeescript를 사용하는 경우 지원하는 여러 줄 문자열 작성 방법을 자유롭게 사용하십시오. 클라이언트에서 압축기의 주석 제거 문제를 해결했다면 해결할 수 없는 경우 heredoc를 사용하는 것이 좋습니다. 압축기 문제 문제는 백슬래시를 사용하여 연결하면 됩니다. 각 줄에 문자 하나만 추가하면 됩니다.