إنشاء سلاسل متعددة الأسطر في JavaScript

Question

لدي الكود التالي في روبي.أريد تحويل هذا الكود إلى جافا سكريبت.ما هو الكود المعادل في JS؟

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

Answer 1

تحديث:

يقدم ECMAScript 6 (ES6) نوعًا جديدًا من الحرفي، وهو حرفية القالب.لديهم العديد من الميزات، الاستيفاء المتغير من بين أمور أخرى، ولكن الأهم من ذلك بالنسبة لهذا السؤال، يمكن أن تكون متعددة الأسطر.

يتم تحديد القالب الحرفي بواسطة backticks:

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

(ملحوظة:أنا لا أدافع عن استخدام HTML في السلاسل)

دعم المتصفح على ما يرام, ، ولكن يمكنك استخدام ناقلات لتكون أكثر توافقا.

---

إجابة ES5 الأصلية:

لا تحتوي Javascript على صيغة مستند هنا.ومع ذلك، يمكنك الهروب من السطر الجديد الحرفي الذي يقترب:

"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 توصي باستخدام تسلسل السلسلة بدلاً من الهروب من الأسطر الجديدة:

لا تفعل هذا:

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 (أتذكر أنني استخدمته كثيرًا في أيام بيرل القديمة الجيدة).

للحفاظ على مراقبة السلاسل المعقدة أو الطويلة متعددة الأسطر، أستخدم أحيانًا نمط المصفوفة:

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

أو النمط المجهول الذي أظهره بالفعل (escape 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];

التحرير الخارجي: com.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
*/});

تم اختبار الطريقة بنجاح في المتصفحات التالية (غير مذكور = لم يتم اختباره):

• أي 4 - 10
• الأوبرا 9.50 - 12 (وليس في 9-)
• سفاري 4 - 6 (ليس في 3-)
• كروم 1 - 45
• فايرفوكس 17 - 21 (ليس في 16-)
• ريكونق 0.7.0 - 0.8.0
• غير مدعوم في كونكيورر 4.7.4

كن حذرًا مع المصغر الخاص بك، بالرغم من ذلك.يميل إلى إزالة التعليقات.ل ضاغط يوي, ، تعليق يبدأ بـ /*! (مثل الذي استخدمته) سيتم الحفاظ عليه.

أعتقد أ حقيقي سيكون الحل هو الاستخدام كوفي سكريبت.

Answer 5

ويمكنك القيام بذلك ...

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

Answer 6

وخطرت لي هذه جيمي جدا التلاعب طريقة سلسلة متعددة مبطنة. منذ تحويل وظيفة إلى سلسلة أيضا إرجاع أي تعليقات داخل وظيفة يمكنك استخدام التعليقات كسلسلة باستخدام تعليق multilined / ** /. لديك فقط لتقليم قبالة الغايات ولديك سلسلة الخاص بك.

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 id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

وبعد ذلك عندما كنت في حاجة للحصول على سلسلة، وأنا مجرد استخدام مسج التالية:

$('#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('');

أداء الحكمة، تسلسل مائل (الأول) هو الأسرع.

يشير إلى حالة الاختبار هذه لمزيد من التفاصيل حول الأداء

تحديث:

مع ال إي إس 2015, ، يمكننا الاستفادة من ميزة سلاسل القالب الخاصة به.باستخدامه، نحتاج فقط إلى استخدام علامات التحديد الخلفية لإنشاء سلاسل متعددة الأسطر

مثال:

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

على Downvoters : ليتم تزويد هذا الرمز للعلم فقط.

تم اختبار هذا في العملات الأجنبية 19 و 24 كروم على ماك

DEMO

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

لتلخيص ذلك، لقد جربت طريقتين مدرجتين هنا في برمجة جافا سكريبت للمستخدم (Opera 11.01):

• هذا لم ينجح: إنشاء سلاسل متعددة الأسطر في JavaScript
• لقد نجح هذا بشكل جيد إلى حد ما، لقد اكتشفت أيضًا كيفية جعله يبدو جيدًا في عرض مصدر Notepad ++: إنشاء سلاسل متعددة الأسطر في JavaScript

لذلك أوصي بنهج العمل لمستخدمي Opera JS.بخلاف ما قاله المؤلف:

لا يعمل على فايرفوكس أو الأوبرا؛فقط على IE، كروم وسفاري.

إنه يعمل في Opera 11.على الأقل في البرامج النصية للمستخدم JS.من المؤسف أنني لا أستطيع التعليق على الإجابات الفردية أو التصويت لصالح الإجابة، سأفعل ذلك على الفور.إذا كان ذلك ممكنا، شخص لديه امتيازات أعلى يرجى القيام بذلك بالنسبة لي.

Answer 15

تم التحديث لعام 2015:لقد مرت ست سنوات الآن:يستخدم معظم الأشخاص مُحمل الوحدة النمطية، ولكل من أنظمة الوحدات الرئيسية طرق لتحميل القوالب.إنها ليست مضمنة، ولكن النوع الأكثر شيوعًا من السلاسل متعددة الأسطر هو القوالب، و يجب عمومًا إبقاء القوالب خارج JS على أي حال.

تتطلب.js:"يتطلب النص".

استخدام require.js البرنامج المساعد "النص"., ، مع قالب متعدد الأسطر في template.html

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

NPM/المتصفح:وحدة "brfs".

متصفح يستخدم وحدة "brfs". لتحميل الملفات النصية.سيؤدي هذا بالفعل إلى بناء القالب الخاص بك في HTML المجمع الخاص بك.

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

سهل.

Answer 16

إذا كنت على استعداد لاستخدام الأسطر الجديدة التي تم تجاوزها، فيمكن استخدامها بشكل جميل. يبدو وكأنه مستند به حدود صفحة.

Answer 17

وهذا يعمل في شركة آي إي، وسفاري، كروم وفايرفوكس:

<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

وأي ما يعادل في جافا سكريبت هو:

var text = `
This
Is
A
Multiline
String
`;

إليك مواصفات . نرى دعم المتصفح في الجزء السفلي من هذا . وفيما يلي بعض الأمثلة جدا.

Answer 20

ويمكنك استخدام نسخة مطبوعة على الآلة الكاتبة (جافا سكريبت شاملة)، فإنه يدعم سلاسل متعدد، وtranspiles تتراجع إلى نقية جافا سكريبت دون النفقات العامة:

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

alert(templates.myString);

إذا كنت تريد أن تنجز الشيء نفسه مع جافا سكريبت سهل:

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)

ملحوظة أن باد / سفاري لا يدعم 'functionName.toString()'

إذا كان لديك الكثير من التعليمات البرمجية تراث، يمكنك أيضا استخدام سهل جافا سكريبت البديل في نسخة مطبوعة على الآلة الكاتبة (لأغراض تنظيف):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

ويمكنك استخدام الكائن متعدد سلسلة من السهل جافا سكريبت البديل، حيث يمكنك وضع القوالب في ملف آخر (والتي يمكنك دمج في حزمة).

ويمكنك أن تجرب نسخة مطبوعة على الآلة الكاتبة في
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، وانها مدعومة من قبل كروم، فايرفوكس، الحافة، وسفاري، وأوبرا.

https://developer.mozilla.org/en -US / مستندات / الانترنت / جافا سكريبت / المرجع / Template_literals

Answer 22

أسهل طريقة لإنشاء سلاسل متعددة الأسطر في Javascript هي استخدام العلامات الخلفية ( `` ).يتيح لك هذا إنشاء سلاسل متعددة الأسطر يمكنك من خلالها إدراج المتغيرات ${variableName}.

مثال:

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

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

my age is: ${age}
`;

console.log(multilineString);

التوافق :

• تم تقديمه في ES6//es2015
• وهو الآن مدعوم محليًا من قبل جميع بائعي المتصفحات الرئيسيين (باستثناء إنترنت إكسبلورر)

تحقق من التوافق الدقيق في مستندات Mozilla هنا

Answer 23

ونسختي من الانضمام لCONCAT سلسلة المستندة إلى مجموعة:

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

لقد عملت هذا جيد بالنسبة لي، خصوصا أنني في كثير من الأحيان إدراج القيم في أتش تي أم أل شيدت بهذه الطريقة. لكنه لا يملك الكثير من القيود. أن المسافة البادئة يكون لطيفا. لا الاضطرار إلى التعامل مع علامات الاقتباس المتداخلة سيكون من الرائع حقا، ومجرد bulkyness منه يزعجني.

هل. دفع () إضافة إلى مجموعة تناول الكثير من الوقت؟ انظر هذه الإجابة ذات الصلة:

و( هل هناك سبب مطوري جافا سكريبت دون ' ر استخدام Array.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. استخدام سذاجة جافا سكريبت، وسيكون للمستخدمين النهائيين وشكرا لكم.

مثال:

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

باستخدام مسج :

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

ونأمل أن يساعد !!