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

질문자 :Newy

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"

Anonymous

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

Devin Rhode

pattern text = <<"HERE" This Is A Multiline String HERE 는 js에서 사용할 수 없습니다.

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

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

¹ 참고: 코드를 축소/난독화하면 손실됩니다.

KooiInc

순수 JavaScript에서 여러 줄 문자열을 가질 수 있습니다.

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

다음 기능 사용:

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

다음과 같은 here-documents를 가질 수 있습니다.

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

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

• 인터넷 익스플로러 4 - 10
• 오페라 9.50 - 12(9-에는 없음)
• Safari 4 - 6(3-에는 없음)
• 크롬 1 - 45
• Firefox 17 - 21( 16- 아님)
• 레콘크 0.7.0 - 0.8.0
• Konqueror 4.7.4에서 지원되지 않음

하지만 미니파이어를 조심하세요. 댓글을 삭제하는 경향이 있습니다. YUI 압축기의 /*! 시작하는 주석! (내가 사용한 것과 같은) 보존됩니다.

진정한 해결책은 CoffeeScript 를 사용하는 것입니다.

ES6 업데이트: 주석이 있는 함수를 만들고 주석에서 toString을 실행하는 대신 백틱을 사용할 수 있습니다. 정규식은 스트립 공간만 업데이트해야 합니다. 이 작업을 수행하기 위해 문자열 프로토타입 메서드를 사용할 수도 있습니다.

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

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

Jordão

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

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

Community Wiki

나는 여러 줄로 된 스트링의 매우 지긋지긋한 조작 방법을 생각해 냈습니다. 함수를 문자열로 변환하면 함수 내부의 모든 주석도 반환되므로 여러 줄 주석 /**/을 사용하여 주석을 문자열로 사용할 수 있습니다. 끝부분만 잘라내고 끈만 있으면 됩니다.

 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)

Luke

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

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

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

Peter V. Mørch

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

예

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

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

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

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

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

나는 얻다:

Tom Beech

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

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

Vignesh Subramanian

스크립트 태그 사용:

• 여러 줄 텍스트를 포함 <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>

jpfreire

나는 이 구문과 들여쓰기를 좋아한다:

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

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

semente

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

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

mightyiam

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>

mplungjan

자바 스크립트에서 해당하는 것은 다음과 같습니다.

 var text = ` This Is A Multiline String `;

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

Lonnie Best

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

stillatmycomputer

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

• 이것은 작동하지 않았습니다. JavaScript에서 여러 줄 문자열 만들기
• 이것은 꽤 잘 작동했습니다. 메모장++ 소스 보기에서 보기 좋게 만드는 방법도 알아냈습니다. JavaScript에서 여러 줄 문자열 만들기

따라서 Opera 사용자 JS 사용자에게 작업 방식을 권장합니다. 저자가 말한 것과 달리 :

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

그것은 Opera 11에서 작동합니다. 적어도 사용자 JS 스크립트에서는. 개별 답변에 댓글을 달거나 답변에 찬성 투표를 할 수 없다는 것이 너무 아쉽습니다. 즉시 처리하겠습니다. 가능하면 더 높은 권한을 가진 사람이 대신 해 주십시오.

Tyler

내 확장은 https://stackoverflow.com/a/15558082/80404 입니다. /*! any multiline comment */ 형식의 주석이 필요합니다. /*! 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();

pocheptsov

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

쉬운.

mikemaccana

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

seo

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

 const str = `This is a multiline text`; console.log(str);

여기에서 더 많은 참조

jenil christo

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

Stefan Steiger

Javascript에서 여러 줄 문자열을 만드는 가장 쉬운 방법은 백틱( `` )을 사용하는 것입니다. ${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 문서의 정확한 호환성을 확인하십시오.

Willem van der Veen

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

earl3s

또한 각 줄 끝에 정방향 백슬래시를 사용하여 여러 줄에 걸쳐 문자열을 확장할 때 정방향 백슬래시 뒤에 추가 문자(대부분 공백, 탭 및 주석이 실수로 추가됨)로 인해 예기치 않은 문자 오류가 발생하므로 찾는 데 1시간이 걸립니다. 밖

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

Prakash GPz

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

예시:

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

Pragmatiq

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

 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개 이상 늘어날 가능성이 없는 문자열 배열에 대해 괜찮은 것 같습니다. 더 큰 배열의 경우 인덱스 추가를 선호하여 이를 피할 것입니다.

KTys

+= 를 사용하여 문자열을 연결할 수 있습니다. 아무도 대답하지 않은 것 같습니다. 읽기 쉽고 깔끔합니다. 이와 같은 것

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

다음과 같이 쓸 수도 있습니다.

 var hello = 'hello'; hello += ' world'; hello += ' blah'; console.log(hello);

Mr. Alien

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

 <!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> 를) 사용하면 브라우저 출력이 다음과 같이 표시됩니다.

이것
~이다
여러 줄
끈.

Sonevol

정확한

Ruby 생성 : "This\nIs\nA\nMultiline\nString\n" - JS 아래에서 정확히 동일한 문자열을 생성합니다.

 text = `This Is A Multiline String ` // TEST console.log(JSON.stringify(text)); console.log(text);

그의 답변의 줄 바꿈 문자가 루비 출력과 정확히 동일한 위치가 아니기 때문에 이것은 Lonnie Best answer의 개선 사항입니다.

Kamil Kiełczewski

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

건배!!

Aditya Hajare

출처 : http:www.stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript