을 만드는 여러 문자열에서 JavaScript

Question

나는 다음과 같은 코드에 루비.로 변환하고 싶 이 코드로 자바 스크립트.what's 에서 사용되는 코드는 다음과 같 JS?

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

Answer 1

업데이트:

ECMAScript 6 (ES6)은 새로운 유형의 문자, 즉 템플릿 리터럴. 그것들은 많은 기능, 가변 보간을 가지고 있지만, 가장 중요한 것은이 질문에서 멀티 린 일 수 있습니다.

템플릿 문자가 구분됩니다 백 티크:

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

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

브라우저 지원은 괜찮습니다, 그러나 사용할 수 있습니다 트랜스 필러 보다 호환됩니다.

---

원래 ES5 답변 :

JavaScript에는 여기에 문서 구문이 없습니다. 그러나 문자 그대로의 Newline을 피할 수 있습니다.

"foo \
bar"

Answer 2

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 스타일 가이드 Newlines를 피하는 대신 문자열 연결을 사용하는 것이 좋습니다.

이것을하지 마십시오 :

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.';

Answer 3

패턴 text = <<"HERE" This Is A Multiline String HERE JS에서는 사용할 수 없습니다 (나는 좋은 오래된 Perl Days에서 많이 사용하는 것을 기억합니다).

복잡하거나 긴 멀티 라인 문자열에 대한 감독을 유지하기 위해 때때로 배열 패턴을 사용합니다.

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

또는 익명의 패턴은 이미 보여준 (탈출 Newline), 코드에서 추악한 블록이 될 수 있습니다.

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

여기에 또 다른 이상하지만 '트릭'이 있습니다.¹:

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.`;

¹ 참고 : 코드를 미치거나 난독 화 한 후 손실됩니다.

Answer 4

너 ~할 수 있다 순수한 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-가 아님)
• 사파리 4-6 (3- 아님)
• 크롬 1-45
• Firefox 17-21 (16 세가 아니라)
• REKONQ 0.7.0-0.8.0
• Konqueror 4.7.4에서는 지원되지 않습니다

그러나 미니 파이어에주의하십시오. 주석을 제거하는 경향이 있습니다. 용 유비 압축기, 댓글이 시작됩니다 /*! (내가 사용한 것과 마찬가지로)는 보존됩니다.

나는 생각한다 진짜 해결책은 사용하는 것입니다 커피 스크립트.

Answer 5

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

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

Answer 6

나는이 매우 지미 조작 방법의 멀티 라인 스트링 방법을 생각해 냈습니다. 함수를 문자열로 변환하면 함수 내에서 주석을 반환하기 때문에 다중 댓글 /** /를 사용하여 주석을 문자열로 사용할 수 있습니다. 당신은 단지 끝을 다듬어야하고 당신의 줄이 있습니다.

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)

Answer 7

테스트 한 곳마다 작동하고 예를 들어 템플릿에 매우 유용하기 때문에 이것을 보지 못한 것에 놀랐습니다.

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

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

Answer 8

나는 div를 출력하여 숨겨지고 필요할 때 jQuery로 div id를 호출하여 이것을 해결했습니다.

예를 들어

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

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

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

여러 줄에서 내 텍스트를 반환합니다. 내가 전화하면

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

나는 얻다:

Answer 9

이를 달성하는 방법에는 여러 가지가 있습니다

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>
  `

Answer 10

스크립트 태그 사용 :

• ~을 추가하다 <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>
  

Answer 11

나는이 구문과 지포를 좋아합니다.

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

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

Answer 12

이 라이브러리가 아름답게 만드는 라이브러리가 있습니다.

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>
*/});

Answer 13

다운 보더:이 코드는 정보 만 제공됩니다.

이것은 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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

Answer 14

요약하면, 나는 사용자 JavaScript 프로그래밍 (Opera 11.01)에 여기에 나열된 2 개의 접근법을 시도했습니다.

• 이것은 작동하지 않았습니다. JavaScript에서 다중 문자열 생성
• 이것은 상당히 잘 작동했으며, 메모장 ++ 소스보기에서보기 좋게 보이게하는 방법을 알아 냈습니다. JavaScript에서 다중 문자열 생성

따라서 Opera 사용자 JS 사용자를위한 작업 접근법을 권장합니다. 저자의 말과는 달리 :

Firefox 또는 Opera에서는 작동하지 않습니다. IE, Chrome 및 Safari에서만.

Opera 11에서 작동합니다. 적어도 사용자 JS 스크립트에서는 작동합니다. 너무 나쁘게 나는 개인의 답변에 대해 언급하거나 답을 발전시킬 수 없다. 나는 즉시 할 것이다. 가능하다면 더 높은 특권을 가진 사람이 저를 위해 해주세요.

Answer 15

2015 년에 업데이트되었습니다: 6 년 후 : 대부분의 사람들은 모듈 로더를 사용하고 주요 모듈 시스템에는 각각 템플릿을로드하는 방법이 있습니다. 인라인은 아니지만 가장 일반적인 유형의 멀티 린 스트링은 템플릿이며 템플릿은 일반적으로 JS에서 보관해야합니다.

요구 사항 .js : '텍스트가 필요합니다'.

사용 require.js '텍스트'플러그인, 멀티 라인 템플릿이 포함되어 있습니다 template.html

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

NPM/Browserify : 'BRFS'모듈

Browserify 'BRFS'모듈을 사용합니다 텍스트 파일을로드합니다. 이것은 실제로 템플릿을 번들로 만든 HTML에 구축합니다.

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

쉬운.

Answer 16

탈출 한 신성민을 기꺼이 사용하려는 경우 사용될 수 있습니다. 훌륭하게. 페이지 테두리가있는 문서처럼 보입니다.

Answer 17

이것은 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>

Answer 18

내 확장 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();

Answer 19

JavaScript의 동등한 것은 다음과 같습니다.

var text = `
This
Is
A
Multiline
String
`;

여기에 있습니다 사양. 이 하단의 브라우저 지원을 참조하십시오 페이지. 여기에 있습니다 예 도.

Answer 20

당신이 사용할 수있는 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 변형에서 멀티 린 스트링 객체를 사용할 수 있습니다. 여기서 템플릿을 다른 파일에 넣습니다 (이 번들에서 병합 할 수 있음).

TypeScript를 시도 할 수 있습니다
http://www.typescriptlang.org/playground

Answer 21

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

Answer 22

Javascrips에서 멀티 라인 문자열을 만드는 가장 쉬운 방법은 백틱 (``)을 사용하는 것입니다. 이를 통해 변수를 ${variableName}.

예시:

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

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

my age is: ${age}
`;

console.log(multilineString);

호환성 :

• 소개되었습니다 ES6//es2015
• 이제 모든 주요 브라우저 공급 업체가 기본적으로 지원합니다 (Internet Explorer 제외)

여기에서 Mozilla 문서의 정확한 호환성을 확인하십시오

Answer 23

내 버전의 배열 기반 교사가 String Accat :

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 개 이상의 항목이 성장하지 않는 문자열 배열에 적합합니다. 더 큰 배열에 대한 인덱스 추가를 피할 수 있습니다.

Answer 24

당신이 사용할 수있는 += 당신의 줄을 연결하기 위해, 아무도 대답하지 않은 것 같습니다. 읽을 수 있고 깔끔한 것 ... 이와 같은 것

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

다음으로 작성할 수도 있습니다

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

console.log(hello);

Answer 25

또한 각 줄의 끝에 앞으로의 백 슬래시를 사용하여 여러 줄로 문자열을 확장 할 때 전방 백 슬래시 후 추가 문자 (주로 공백, 탭 및 실수로 추가)가 예상치 못한 문자 오류가 발생하여 찾는 데 한 시간이 걸렸습니다. 밖으로

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

Answer 26

인터넷 사용 문자열 연결에 대한 사랑을 원하시면이를 위해 ES6 솔루션을 사용하지 않도록 선택하십시오. ES6은 CSS3 및 특정 브라우저가 CSS3 움직임에 적응하는 데 속도가 느리다는 것과 같이 전반적으로 지원되지 않습니다. 일반 OL 'JavaScript를 사용하면 최종 사용자가 감사합니다.

예시:

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

Answer 27

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

<!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 소스 코드는 다음과 같습니다.

This 
 <br>is
 <br>multiline
 <br>string.

사용하여 <br> 브라우저 출력은 다음과 같습니다.

This
is
multiline
string.

Answer 28

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

더 많은 참조 여기

Answer 29

이 해결 방법은 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>

건배!!

Answer 30

도 익명답고 발견이 작은 여기에 속임수,그것은 작동하지 않는 경우가 있는 공간 후에 백슬래 \
그래서 다음과 같은 솔루션을 작동하지 않는-

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);​

Hope it helps!!