JavaScript에서 여러 줄 문자열 만들기

Ruby에는 다음 코드가 있습니다. 이 코드를 JavaScript로 변환하고 싶습니다. JS의 동등한 코드는 무엇입니까?

text = <<"HERE"
This
Is
A
Multiline
String
HERE

최신 정보:

ECMAScript 6 (ES6)에는 새로운 유형의 리터럴, 즉 템플릿 리터럴이 도입되었습니다 . 그것들은 다른 많은 것들과 다양한 보간법을 가지고 있지만, 가장 중요한 것은이 질문에 대해 여러 줄이 될 수 있습니다.

템플릿 리터럴은 백틱 으로 구분됩니다 .

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(참고 : 문자열에서 HTML을 사용하는 것을 옹호하지 않습니다)

브라우저 지원은 가능 하지만 트랜스 파일러 를 사용 하여 호환성을 높일 수 있습니다.

원래 ES5 답변 :

Javascript에는 here-document 구문이 없습니다. 그러나 리터럴 개행을 피할 수 있습니다.

"foo \
bar"

ES6 업데이트 :

첫 번째 답변에서 언급했듯이 ES6 / Babel을 사용하면 백틱을 사용하여 여러 줄 문자열을 만들 수 있습니다.

const htmlString = `Say hello to 
multi-line
strings!`;

보간 변수는 백틱으로 구분 된 문자열과 함께 제공되는 인기있는 새로운 기능입니다.

const htmlString = `${user.name} liked your post about strings`;

이것은 단지 연결로 변환됩니다.

user.name + ' liked your post about strings'

원래 ES5 답변 :

Google의 JavaScript 스타일 가이드 는 줄 바꿈을 피하는 대신 문자열 연결을 사용하는 것이 좋습니다.

이 작업을 수행하지 마십시오 :

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

각 줄의 시작 부분에있는 공백은 컴파일 타임에 안전하게 제거 할 수 없습니다. 슬래시 뒤에 공백이 있으면 까다로운 오류가 발생합니다. 대부분의 스크립트 엔진이이를 지원하지만 ECMAScript의 일부는 아닙니다.

대신 문자열 연결을 사용하십시오.

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

패턴 text = <<"HERE" This Is A Multiline String HEREjs 사용할 수 없습니다 (좋은 펄 시절에 많이 사용하는 것을 기억합니다).

복잡하거나 긴 여러 줄 문자열을 감독하기 위해 때때로 배열 패턴을 사용합니다.

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

또는 익명으로 이미 표시된 패턴 (줄 바꿈 이스케이프)은 코드에서 못생긴 블록 일 수 있습니다.

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

또 다른 이상하지만 작동하는 '트릭' ^{1이 있습니다} .

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

외부 편집 : jsfiddle

ES20xx 는 템플릿 문자열을 사용하여 여러 줄에 걸친 문자열을 지원합니다 .

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

¹ 참고 : 코드 축소 / 난독 화 후에는 손실됩니다

당신 은 할 수 있습니다순수한 JavaScript로 여러 줄 문자열을 가질 .

이 방법은 구현에 따라 정의 된 함수의 직렬화를 기반으로합니다 . 대부분의 브라우저에서 작동하지만 (아래 참조) 앞으로도 계속 작동 할 것이라는 보장이 없으므로 의존하지 마십시오.

다음 기능 사용 :

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

다음과 같은 문서를 가질 수 있습니다.

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

이 방법은 다음 브라우저에서 성공적으로 테스트되었습니다 (언급되지 않음 = 테스트되지 않음).

• IE 4-10
• 오페라 9.50-12 (9가 아님)
• Safari 4-6 (3 아님)
• 크롬 1-45
• Firefox 17-21 ( 16-이 아닌 )
• Rekonq 0.7.0-0.8.0
• Konqueror 4.7.4에서 지원되지 않습니다

그래도 축소기를 조심하십시오. 주석을 제거하는 경향이 있습니다. 를 들어 YUI 압축기 , 코멘트로 시작/*! 보존됩니다 (내가 사용하는 것과 같은).

실제 해결책은 CoffeeScript 를 사용하는 것이라고 생각합니다 .

ES6 업데이트 : 주석이있는 함수를 만들고 주석에서 toString을 실행하는 대신 backtick를 사용할 수 있습니다. 공간을 제거하기 위해 정규식을 업데이트해야합니다. 이를 위해 문자열 프로토 타입 방법을 사용할 수도 있습니다.

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

멋지다. 누군가이 .removeIndentation 문자열 메소드를 작성해야합니다 ...;)

당신은 이것을 할 수 있습니다 ...

var string = 'This is\n' +
'a multiline\n' + 
'string';

나는 다중 줄 문자열의이 지 미식 리깅 방법을 생각해 냈습니다. 함수를 문자열로 변환하면 함수 내부의 주석도 반환되므로 여러 줄 주석 / ** /를 사용하여 주석을 문자열로 사용할 수 있습니다. 끝을 다듬어야하고 줄이 있습니다.

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)

나는 그것을 보지 못한 것에 놀랐다. 왜냐하면 그것이 테스트 한 모든 곳에서 작동하기 때문에 템플릿과 같이 매우 유용하다.

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

HTML이 있지만 작동하지 않는 환경을 아는 사람이 있습니까?

div를 출력하고 숨기고 필요할 때 jQuery로 div id를 호출 하여이 문제를 해결했습니다.

예 :

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

그런 다음 문자열을 가져와야 할 때 다음 jQuery를 사용합니다.

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

어떤 텍스트를 여러 줄로 반환합니다. 내가 전화하면

alert($('#UniqueID').html());

나는 얻다:

이것을 달성하는 여러 가지 방법이 있습니다

1. 슬래시 연결

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. 규칙적인 연결

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. 배열 결합 연결

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

현명한 성능, 슬래시 연결 (첫 번째)이 가장 빠릅니다.

이 테스트 사례를 참조하십시오 성능에 대한 자세한 내용은

최신 정보:

ES2015를 사용하면 템플릿 문자열 기능을 활용할 수 있습니다. 그것으로, 우리는 멀티 라인 문자열을 만들기 위해 백 틱을 사용해야합니다.

예:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

스크립트 태그 사용하기 :

• 추가하다 <script>...</script> 줄 문자를 포함 블록을 head태그에 추가하십시오.

• 여러 줄로 된 텍스트를 그대로 얻으십시오 ... (텍스트 인코딩을 조심하십시오 : UTF-8, ASCII)

  <script>
  
      // pure javascript
      var text = document.getElementById("mySoapMessage").innerHTML ;
  
      // using JQuery's document ready for safety
      $(document).ready(function() {
  
          var text = $("#mySoapMessage").html(); 
  
      });
  
  </script>
  
  <script id="mySoapMessage" type="text/plain">
  
      <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
         <soapenv:Header/>
         <soapenv:Body>
            <typ:getConvocadosElement>
               ...
            </typ:getConvocadosElement>
         </soapenv:Body>
      </soapenv:Envelope>
  
      <!-- this comment will be present on your string -->
      //uh-oh, javascript comments...  SOAP request will fail 
  
  
  </script>

나는이 구문과 indendation을 좋아한다 :

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(그러나 실제로 여러 줄 문자열로 간주 될 수는 없습니다)

이 라이브러리는 아름답게 만듭니다.

https://github.com/sindresorhus/multiline

전에

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

후

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

Downvoters :이 코드는 정보 용으로 만 제공됩니다.

이것은 Mac의 Fx 19 및 Chrome 24에서 테스트되었습니다.

데모

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>:
       </span>
       <span class="comment-text">
          $text
       </span> 
       @<span class="comment-time">
          2d
       </span> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

요약하면 사용자 자바 스크립트 프로그래밍 (Opera 11.01)에 나열된 두 가지 접근법을 시도했습니다.

• 이것은 작동하지 않습니다 : JavaScript로 여러 줄 문자열 만들기
• 이것은 상당히 잘 작동했으며 메모장 ++ 소스 뷰에서 잘 보이게 만드는 방법을 알아 냈습니다. JavaScript로 여러 줄 문자열 만들기

따라서 Opera 사용자 JS 사용자에게는 작동 방식을 권장합니다. 저자의 말과 달리 :

파이어 폭스 나 오페라에서는 작동하지 않습니다. IE, 크롬 및 사파리에서만 가능합니다.

Opera 11에서는 작동합니다. 최소한 사용자 JS 스크립트에서는 작동합니다. 안타깝게도 개별 답변에 댓글을 달거나 답변을 찬성 할 수 없습니다. 즉시 처리하겠습니다. 가능하다면, 더 높은 특권을 가진 사람이 저를 위해 그것을하십시오.

내 확장은 https://stackoverflow.com/a/15558082/80404 입니다. /*! any multiline comment */기호 가있는 형식으로 주석을 기대합니다 ! 최소화로 제거를 방지하는 데 사용됩니다 (적어도 YUI 압축기의 경우).

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

예:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

2015 년 업데이트 : 6 년 후 : 대부분의 사람들은 모듈 로더를 사용하고 기본 모듈 시스템에는 각각 템플릿을로드하는 방법이 있습니다. 인라인은 아니지만 가장 일반적인 유형의 여러 줄 문자열은 템플릿이며 템플릿은 일반적으로 JS 외부에 보관해야합니다 .

require.js : '텍스트 필요'.

template.html의 여러 줄 템플릿 과 함께 require.js 'text'플러그인 사용

var template = require('text!template.html')

NPM / browserify : 'brfs'모듈

Browserify 는 'brfs'모듈 을 사용하여 텍스트 파일을로드합니다. 실제로 템플릿을 번들 HTML로 빌드합니다.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

쉬운.

이스케이프 된 줄 바꿈을 기꺼이 사용하려는 경우 잘 사용할 수 있습니다 . 페이지 테두리가있는 문서처럼 보입니다 .

자바 스크립트에서 동등한 것은 다음과 같습니다

var text = `
This
Is
A
Multiline
String
`;

사양 은 다음과 같습니다 . 이 페이지 하단의 브라우저 지원을 참조하십시오 . 다음은 몇 가지 예 입니다.

이것은 IE, Safari, Chrome 및 Firefox에서 작동합니다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

TypeScript (JavaScript SuperSet)를 사용할 수 있으며 여러 줄 문자열을 지원하며 오버 헤드없이 순수한 JavaScript로 다시 변환합니다.

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

일반 JavaScript로 동일한 작업을 수행하려는 경우 :

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

iPad / Safari는 지원하지 않습니다 'functionName.toString()'

많은 레거시 코드가있는 경우 정리를 위해 TypeScript에서 일반 JavaScript 변형을 사용할 수도 있습니다.

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

템플릿을 다른 파일 (번들에 병합 할 수 있음)에 넣는 일반 JavaScript 변형의 여러 줄 문자열 객체를 사용할 수 있습니다.

http://www.typescriptlang.org/Playground 에서 TypeScript를 사용해 볼 수 있습니다

ES6 방식은 템플릿 리터럴을 사용하는 것입니다.

const str = `This 

is 

a

multiline text`; 

console.log(str);

여기에 더 많은 참조

ES6에서는 백틱을 사용하여 여러 줄에 문자열을 지정할 수 있습니다. 이것을 템플릿 리터럴이라고합니다. 이처럼 :

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

백틱 사용은 NodeJS에서 작동하며 Chrome, Firefox, Edge, Safari 및 Opera에서 지원됩니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Javascrips에서 여러 줄로 된 문자열을 만드는 가장 쉬운 방법은 백틱 (``)을 사용하는 것입니다. 이를 통해 변수를 삽입 할 수있는 여러 줄 문자열을 만들 수 있습니다.${variableName} .

예:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

호환성 :

• ES6// 에서 소개되었습니다es2015
• 이제 모든 주요 브라우저 공급 업체에서 기본적으로 지원합니다 (인터넷 탐색기 제외).

여기에서 Mozilla 문서의 정확한 호환성 확인

문자열 연결에 대한 내 배열 기반 조인 버전 :

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

이것은 종종 이런 식으로 구성된 HTML에 값을 삽입 할 때 특히 효과적이었습니다. 그러나 많은 한계가 있습니다. 들여 쓰기가 좋을 것입니다. 중첩 된 따옴표를 다루지 않아도 정말 좋으며 부피가 커서 나를 귀찮게합니다.

배열에 추가하는 .push ()가 많은 시간을 소비합니까? 이 관련 답변을 참조하십시오.

( JavaScript 개발자가 Array.push ()를 사용하지 않는 이유가 있습니까? )

이 (반대) 테스트 실행을 살펴본 후 .push ()는 100 개가 넘지 않는 문자열 배열에 적합합니다. 더 큰 배열에 대해서는 인덱스 추가를 선호하지 않습니다.

+=문자열을 연결 하는 데 사용할 수 있으며 아무도 대답하지 않은 것처럼 보입니다.

var hello = 'hello' +
            'world' +
            'blah';

로 쓸 수도 있습니다

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

또한 각 줄의 끝에서 백 슬래시를 사용하여 문자열을 여러 줄로 확장하면 슬래시 뒤에 추가 문자 (대부분 공백, 탭 및 주석이 실수로 추가됨)가 예기치 않은 문자 오류를 일으켜 발견하는 데 1 시간이 걸렸습니다. 밖

var string = "line1\  // comment, space or tabs here raise error
line2";

인터넷 사용 문자열 연결을 좋아하고 ES6 솔루션을 사용하지 않도록 선택하십시오. ES6는 CSS3 및 특정 브라우저가 CSS3 동작에 느리게 적응하는 것처럼 보드 전체에서 지원되는 것은 아닙니다. 일반 ol 'JavaScript를 사용하면 최종 사용자가 감사합니다.

예:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

연결 연산자 '+'를 사용해야합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

\n소스 코드 를 사용 하면 다음과 같이 보입니다.

이 
 <br>는
 여러 줄
 <br> 문자열.

<br>브라우저 출력 을 사용 하면 다음과 같이 보입니다.

이
이다
여러 줄
끈.

이 해결 방법은 IE, Chrome, Firefox, Safari, Opera에서 작동해야한다고 생각합니다.

jQuery 사용 :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

순수 자바 스크립트 사용 :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

건배!!

익명 답변을 시도하고 여기에 약간의 트릭이 있다는 것을 알았습니다. 백 슬래시 뒤에 공백이 있으면 작동하지 않으므로 \
다음 해결책이 작동하지 않습니다.

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

그러나 공간이 제거되면 작동합니다.

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

그것이 도움이되기를 바랍니다!