programing

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

javaba 2023. 1. 9. 21:30

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

나는 루비에 다음과 같은 코드를 가지고 있다.이 코드를 JavaScript로 변환하고 싶습니다.JS의 등가 코드는 무엇입니까?

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

업데이트:

ECMAScript 6(ES6)에서는 템플릿 리터럴이라는 새로운 유형의 리터럴이 도입됩니다.이 질문에는 가변 보간 등 많은 특징이 있지만, 이 질문에서 가장 중요한 것은 다중 행일 수 있다는 것입니다.

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

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

(주의: 문자열에 HTML을 사용하는 것은 권장하지 않습니다.)

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

오리지널 ES5 답변:

Javascript에는 여기 문서 구문이 없습니다.단, 리터럴한 줄바꿈은 피할 수 있습니다.이 줄바꿈은 다음과 같습니다.

"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에서는 사용할 수 없습니다(예전 Perl 시절에는 많이 사용한 것으로 기억합니다).

복잡하거나 긴 여러 줄의 문자열에 대한 감시를 유지하기 위해 어레이 패턴을 사용하는 경우가 있습니다.

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

이상하지만 효과적인 '꼼수'¹가 또 있습니다.

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
파이어폭스 17 - 21 (16-은 아님)
기준 0.7.0 - 0.8.0
Konqueror 4.7.4에서는 지원되지 않습니다.

하지만 미니어를 조심하세요.댓글을 삭제하는 경향이 있습니다.YUI 컴프레서의 경우 코멘트는 다음과 같이 시작합니다./*!이데올로기 때문에

진정한 해결책은 커피스크립트를 사용하는 것이라고 생각합니다.

ES6 업데이트: 코멘트로 함수를 만들고 코멘트로 toString을 실행하는 대신 backtick을 사용할 수 있습니다.regex는 공간을 제거하도록 업데이트해야 합니다.이를 위해 문자열 프로토타입 메서드를 사용할 수도 있습니다.

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

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

넌 할 수 있어...

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>

다음 구문과 기호가 마음에 듭니다.

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

(단, 실제로는 여러 줄의 문자열로 간주할 수 없습니다)

다운보터:이 코드는 참고용으로만 제공됩니다.

이는 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>

아름다운 도서관이 있습니다.

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

여기서 지나치게 조작된 답을 많이 찾았어요내 의견으로는 두 가지 가장 좋은 답은 다음과 같다.

 let str = `Multiline string.
            foo.
            bar.`

최종적으로 로그에 기록됩니다.

Multiline string.
           foo.
           bar.

let str = `Multiline string.
foo.
bar.`

그러면 올바르게 기록되지만 str이 함수/개체 내에 중첩되어 있으면 스크립트 파일에는 보기 흉합니다.:

Multiline string.
foo.
bar.

str을 올바르게 기록하는 regex에 대한 매우 간단한 답변입니다.

let str = `Multiline string.
           foo.
           bar.`.replace(/\n +/g, '\n');

이 방법은 완벽한 솔루션은 아니지만 새로운 행(\n) 뒤에 공백이 하나 이상 있는 경우(+)가 표시됩니다.* (제로 이상)에서도 동작합니다.

보다 명시적으로 {n,}을(를) 사용할 수 있습니다. 즉, 발생 횟수가 n개 이상임을 의미합니다.

javascript에서는 다음과 같습니다.

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>

요약하자면, 저는 여기 사용자 javascript 프로그래밍(Opera 11.01)에 나열된 두 가지 접근 방식을 시도했습니다.

동작하지 않음: JavaScript에서 여러 줄 문자열 생성
이것은 꽤 잘 동작하고 있습니다.메모장++ 소스 뷰에서 보기 좋게 하는 방법도 알고 있습니다.JavaScript에서 여러 줄 문자열 만들기

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

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

그것은 오페라 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.timeout: '텍스트 표시'

template.html에 여러 줄 템플릿이 있는 require.js 'text' 플러그인 사용

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

NPM/브라우저: 'brfs' 모듈

Browserify는 'brfs' 모듈을 사용하여 텍스트 파일을 로드합니다.이렇게 하면 실제로 템플릿이 번들HTML로 작성됩니다.

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

만만하다.

탈출한 새 라인을 사용할 의향이 있다면 잘 사용할 수 있습니다.페이지 테두리가 있는 문서처럼 보입니다.

여기에 이미지 설명 입력

정확한

루비 제품:"This\nIs\nA\nMultiline\nString\n"는 동일한 합니다. - 래 JS - 。

text = `This
Is
A
Multiline
String
`

// TEST
console.log(JSON.stringify(text));
console.log(text);

이것은 Lonnie Best의 답변에 대한 개선입니다. 왜냐하면 그의 답변에 있는 새로운 줄의 문자는 루비 출력과 정확히 같은 위치가 아니기 때문입니다.

JavaScript에서 여러 줄 문자열을 인쇄하는 간단한 방법은 backticks(' ' ' ')로 표시된 템플릿 리터럴(템플릿 문자열)을 사용하는 것입니다.템플릿 문자열 내부 변수를 사용할 수도 있습니다(').name is ${value} ) )

할 수도 있습니다.

const value = `multiline`
const text = `This is a
${value}
string in js`;
console.log(text);

자바스크립스 백틱스(" ) 하면 여러 수 이할 수 .${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 문서에서 정확한 호환성을 확인합니다.

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

자세한 내용은 이쪽

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 바리안트의 multiline-string 객체를 사용하여 템플릿을 다른 파일(번들로 병합 가능)에 저장할 수 있습니다.

TypeScript는 TypeScript에서 할 수 .
http://www.typescriptlang.org/Playgroundhttpwww..org/Playground

ES6에서는 백틱을 사용하여 여러 줄에 문자열을 지정할 수 있습니다.'템플릿 리터럴'이라고 하죠다음과 같이 합니다.

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

Backtick은 NodeJS에서 사용할 수 있으며 Chrome, Firefox, Edge, Safari 및 Opera에서 지원됩니다.

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

또, 각 행의 말미에 순방향 백슬래시를 사용해 문자열을 여러 행에 걸쳐 전개하는 경우, 순방향 백슬래시 후에 추가 문자(대부분 실수로 추가된 공백, 탭, 코멘트)에 의해서 예기치 않은 문자 에러가 발생하는 것에 주의해 주세요.이것에 대해서는, 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";

태그 부착 템플릿을 사용하여 원하는 출력을 얻을 수 있습니다.

예를 들어 다음과 같습니다.

// Merging multiple whitespaces and trimming the output

const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }
console.log(t`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This Is A Multiline String'

// Similar but keeping whitespaces:

const tW = (strings) => { return strings.map((s) => s.replace(/\s+/g, '\n')).join("").trim() }
console.log(tW`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This\nIs\nA\nMultiline\nString'

string concat용 어레이 기반 join 버전:

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개 이상의 아이템이 증가하지 않는 문자열 배열에 적합하다고 생각됩니다.대형 배열에 대해서는 인덱스를 추가하지 않도록 하겠습니다.

언급URL : https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript

저작자표시

'programing' 카테고리의 다른 글

PHP에 파일을 업로드 할 때 $_FILES가 비어 있는 이유는 무엇입니까? (0)	2023.01.09
스킴용 Hadoop 파일 시스템 없음: 파일 (0)	2023.01.09
MySQL: SELECT 문의 대소문자가 구분됩니까? (0)	2023.01.09
입력 필드 값 설정 (0)	2023.01.09
정수 나눗셈이 다른 정수 대신 부동을 생성하는 이유는 무엇입니까? (0)	2023.01.09

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

각종 프로그래밍 정보를 다루는 블로그입니다.

jQuery, C#, C, c++, spring3, vuejs2, javascript, vuex, spring, java,

Today :
Yesterday :

javaba

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

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

업데이트:

오리지널 ES5 답변:

ES6 업데이트:

오리지널 ES5 답변:

전에

끝나고

require.timeout: '텍스트 표시'

NPM/브라우저: 'brfs' 모듈

정확한

예:

호환성:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

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

업데이트:

오리지널 ES5 답변:

ES6 업데이트:

오리지널 ES5 답변:

전에

끝나고

require.timeout: '텍스트 표시'

NPM/브라우저: 'brfs' 모듈

정확한

예:

호환성:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바